Components

Button Toggle Switch

The Button Toggle Switch component is used for rendering out a group of buttons that have the ability to generate values from their toggled state. This functionality is similar to a radio button & a custom checkbox wrapped into one component. It should be used for custom selection and choices.

Import

import { ButtonToggleSwitch } from '@outfit/outkit';

Basic Usage

Variants

Multiselect Usage

Dynamic Icon

Best Practice

The Button Toggle Switch can be used in a variety of ways. The button is aimed to be more flexible than simple radios and toggle buttons.

Props

Property	Type	Required	Default	Description
`size`	`string[] \| string`	No	`'md'`	The size of the buttons.
`buttons`	`node[] \| node`	Yes		Children containing buttons to render
`variantColor`	`string \| node`	No	`'gray'`	Color of the entire button group
`defaultValue`	`string[] \| string`	No		The initial value of the default that will be selected. If left null, the default will be null
`onChange`	`func`	Yes		A callback function for getting the value based on the changing values.
`multiselect`	`bool`	No		A true of false boolean prop that toggles the ability to select multiple & none.