Components
ToggleButton
A toggle button allows a user to toggle a selection on or off, for example switching between two states or modes.
ToggleButton
A toggle button allows a user to toggle a selection on or off, for example switching between two states or modes.
Preview
Interactive
Properties
Variant
Size
Live Code Snippet
import { ToggleButton } from '@moul-dev/ui';
import { useState } from 'react';
export default function Example() {
const [isSelected, setIsSelected] = useState(false);
return (
<ToggleButton
isSelected={isSelected}
onChange={setIsSelected}
>
Mute Audio
</ToggleButton>
);
}The ToggleButton component is built with React Aria and styled using StyleX.
Import
import { ToggleButton } from '@moul-dev/ui';Variants
You can customize the styling variant of the toggle button using the variant prop:
<ToggleButton variant="primary">Primary</ToggleButton>
<ToggleButton variant="secondary">Secondary</ToggleButton>Sizes
You can customize the size of the toggle button using the size prop:
<ToggleButton size="sm">Small</ToggleButton>
<ToggleButton size="md">Medium (Default)</ToggleButton>
<ToggleButton size="lg">Large</ToggleButton>Selection
Use the isSelected or defaultSelected prop to set the selection state, and onChange to handle selection changes.
import { useState } from 'react';
import { ToggleButton } from '@moul-dev/ui';
import { Star } from 'lucide-react';
function Example(props) {
let [selected, setSelection] = useState(false);
return (
<>
<ToggleButton
{...props}
aria-label="Star"
isSelected={selected}
onChange={setSelection}>
<Star size={18} />
</ToggleButton>
<p>{selected ? 'Starred' : 'Not starred'}</p>
</>
);
}Props
ToggleButton Props
Prop
Type
Default className: react-aria-ToggleButton
| Render Prop | CSS Selector |
|---|---|
isSelected Whether the button is currently selected. | [data-selected] |
state State of the toggle button. | — |
isHovered Whether the button is currently hovered with a mouse. | [data-hovered] |
isPressed Whether the button is currently in a pressed state. | [data-pressed] |
isFocused Whether the button is focused, either via a mouse or keyboard. | [data-focused] |
isFocusVisible Whether the button is keyboard focused. | [data-focus-visible] |
isDisabled Whether the button is disabled. | [data-disabled] |