<Toggle aria-label="Mark freelancer as favorite">
<StarIcon className="group-data-pressed/toggle:hidden" />
<StarIcon weight="fill" className="hidden group-data-pressed/toggle:inline" />
Favorite
</Toggle>Colour alone is a weak pressed state. Swapping an outline icon for a filled one
off group-data-pressed is the pattern the component is built for.
API
| Prop | Type | Default | |
|---|---|---|---|
size | "default" | "lg" | "sm" | "default" | Control height. Match it to the controls beside it. |
variant | "default" | "outline" | "default" | outline gives the toggle a border, so it stays visible against a
surface that already has a fill. |
exit | Exit | — | Inside a <Presence>: plays this child's way out before it unmounts. |
className | string | ((state: ToggleState) => string | undefined) | — | CSS class applied to the element, or a function that returns a class based on the component's state. |
defaultPressed | boolean | — | Whether the toggle button is currently pressed.
This is the uncontrolled counterpart of pressed. |
disabled | boolean | — | Whether the component should ignore user interaction. |
nativeButton | boolean | — | Whether the component renders a native <button> element when replacing it
via the render prop.
Set to false if the rendered element is not a button (for example, <div>). |
onPressedChange | ((pressed: boolean, eventDetails: { reason: "none"; event: Event; cancel: () => void; allowPropagation: () => void; isCanceled: boolean; isPropagationAllowed: boolean; trigger: Element | undefined; }) => void) | — | Callback fired when the pressed state is changed. |
pressed | boolean | — | Whether the toggle button is currently pressed.
This is the controlled counterpart of defaultPressed. |
render | ComponentRenderFn<HTMLProps, ToggleState> | ReactElement<unknown, string | JSXElementConstructor<any>> | — | Allows you to replace the component's HTML element
with a different tag, or compose it with another component. Accepts a ReactElement or a function that returns the element to render. |
style | CSSProperties | ((state: ToggleState) => CSSProperties | undefined) | — | Style applied to the element, or a function that returns a style object based on the component's state. |
value | string | — | A unique string that identifies the toggle when used inside a toggle group. |
Plus the DOM props of the element it renders. Source: toggle/components/toggle.tsx.