ToggleButton

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

#
Documentation

#
Usage

ToggleButton extends the Button component.

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>
  );
}

#
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" \| "danger" \| "primary" \| "subtle" \| "danger-outline" \| "inverse"
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
iconOnly Whether button should have square shape. false \| true
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"

#
Changelog

#
0.1.0

Added component

Toast Tooltip