ToggleButton API

API reference for the ToggleButton component: its props with their token values and defaults, the styled-system prop groups, and forwarded HTML attributes.

Demos

For usage examples, visit the component demo page: ToggleButton

Import

import { ToggleButton } from '@soroush.tech/design-system/ToggleButton'

Props

Prop	Type	Default	Description
`value`	`string \| number`	-	The value associated with the button inside a group. Required.
`isSelected`	`boolean`	inferred	Active state - inferred from the group's value when omitted.
`color`	`keyof Theme['palette']`	`'default'`	Active-state color. Inherited from the group.
`onChange`	`(value: string \| number) => void`	-	Fired with the button's `value` when toggled.
`loading`	`boolean`	`false`	Shows a spinner and disables the button - e.g. while saving.

All other Button props (except variant / href / target / rel) pass through. type defaults to 'button'. Icon-only buttons need an aria-label.

Source code

If this page does not answer your question, have a look at the implementation of the component for more detail.