ToggleButtonOption

ToggleButtonOption is a sub-component that is used to define an option within the ToggleButtonOptionGroup component.

All docs for ToggleButtonOption will use the ToggleButtonOptionGroup component as a parent. This is to ensure that the ToggleButtonOption is rendered correctly.

Please ensure you use the Stack component with the correct spacing to layout the options as you see fit.

Basic Usage


import { ToggleButton, ToggleButtonOptionGroup, ToggleButtonOption } from '@krakentech/coral';
 
<ToggleButton>
    <ToggleButtonOptionGroup>
        <Stack gap="xxs">
            <ToggleButtonOption value="option-1">Option 1</ToggleButtonOption>
            <ToggleButtonOption value="option-2">Option 2</ToggleButtonOption>
            <ToggleButtonOption value="option-3">Option 3</ToggleButtonOption>
        </Stack>
    </ToggleButtonOptionGroup>
</ToggleButton>

Properties

disabled


<ToggleButton>
    <ToggleButtonOptionGroup>
        <Stack gap="xxs">
            <ToggleButtonOption value="option-1">Option 1</ToggleButtonOption>
            <ToggleButtonOption value="option-2" disabled>
                Option 2
            </ToggleButtonOption>
            <ToggleButtonOption value="option-3">Option 3</ToggleButtonOption>
        </Stack>
    </ToggleButtonOptionGroup>
</ToggleButton>

Full API

Name	Type	Default
`attributes`	`Attributes`
`disabled`	`boolean` If `true`, this button will be disabled and not respond to user interactions.	`false`
`value`	`ToggleValue` The value of the toggle button.
`children`	`ReactNode`