ToggleButton

ToggleButton component represents a button that can be toggled on or off.

#
Documentation

#
Usage

Size


import type { ComponentPropsWithRef } from "react";
 
import { ToggleButton } from "@optiaxiom/react";
import { IconLayoutSidebar } from "@tabler/icons-react";
 
export function App({
  size = "md",
}: Pick<ComponentPropsWithRef<typeof ToggleButton>, "size">) {
  return (
    <ToggleButton
      aria-label="Toggle sidebar"
      icon={<IconLayoutSidebar />}
      size={size}
    />
  );
}

#
Controlled

Use the pressed and defaultPressed props to toggle between controlled and uncontrolled usage. And combine it with onPressedChange to listen for changes to the state.


import { Button, Flex, ToggleButton } from "@optiaxiom/react";
import { IconLayoutSidebar } from "@tabler/icons-react";
import { useState } from "react";
 
export function App() {
  const [value, setValue] = useState(false);
 
  return (
    <Flex flexDirection="row">
      <ToggleButton
        aria-label="Toggle sidebar"
        icon={<IconLayoutSidebar />}
        onPressedChange={setValue}
        pressed={value}
      />
 
      <Button disabled={!value} onClick={() => setValue(false)}>
        Reset
      </Button>
    </Flex>
  );
}

#
Appearance

Use the appearance prop to select between the different button appearances.


import { Flex, ToggleButton } from "@optiaxiom/react";
import { IconLayoutSidebar } from "@tabler/icons-react";
 
export function App() {
  return (
    <Flex flexDirection="row">
      <ToggleButton
        appearance="subtle"
        aria-label="Toggle sidebar"
        icon={<IconLayoutSidebar />}
      />
 
      <ToggleButton aria-label="Toggle sidebar" icon={<IconLayoutSidebar />} />
    </Flex>
  );
}

#
Accessibility

When using icon only buttons please make sure to always include an aria-label prop for screen readers and optionally use tooltips to visually denote the button’s intent.


import { ToggleButton, Tooltip } from "@optiaxiom/react";
import { IconLayoutSidebar } from "@tabler/icons-react";
 
export function App() {
  return (
    <Tooltip content="Toggle sidebar">
      <ToggleButton aria-label="Toggle sidebar" icon={<IconLayoutSidebar />} />
    </Tooltip>
  );
}

#
Disabled state

Set the disabled prop to true to disable buttons and prevent any interactions.

For accessibility please make sure to include text that explains why the button is disabled or use a tooltip.


import { ToggleButton, Tooltip } from "@optiaxiom/react";
import { IconLayoutSidebar } from "@tabler/icons-react";
 
export function App() {
  return (
    <Tooltip content="Disabled toggle demo">
      <ToggleButton
        aria-label="Toggle sidebar"
        disabled
        icon={<IconLayoutSidebar />}
      />
    </Tooltip>
  );
}

#
Related

Button

Button component is used to trigger actions.

SegmentedControl

Toggle buttons for switching between different values or views.

ToggleButton

ToggleButton component represents a button that can be toggled on or off.

#
Props

#
ToggleButton

Supports all Button props in addition to its own. Renders a <button> element.

Prop
`addonAfter` Display content inside the button after `children`. `ReactNode`
`addonBefore` Display content inside the button before `children`. `ReactNode`
`appearance` Control the appearance by selecting between the different button types. `"default" \| "subtle"`
`asChild` Change the default rendered element for the one passed as a child, merging their props and behavior. Read the Composition guide for more details. `false \| true`
`className` `string`
`defaultPressed` The state of the toggle when initially rendered. Use `defaultPressed` if you do not need to control the state of the toggle. @defaultValue false `false \| true`
`disabled` Whether the button is disabled. `false \| true`
`icon` Display an icon before or after the button content or omit `children` to only show the icon. `ReactNode`
`iconPosition` Control whether to show the icon before or after the button content. `"end" \| "start"`
`loading` Whether to show loading spinner inside the button. `false \| true`
`onPressedChange` The callback that fires when the state of the toggle changes. `(pressed: boolean) => void`
`pressed` The controlled state of the toggle. `false \| true`
`size` Control the size of the button. `"sm" \| "md" \| "lg"`
`square` Whether button should have square shape. `false \| true`

#
Changelog

#
0.1.0

Added component