ToggleButton - Aspect UI

Docs

Components

Toggle Button

ToggleButton - Aspect UI

The ToggleButton component switches between active/inactive states. Useful for toggling filters, views, or modes, it supports icons, accessibility, and group behavior.

Table of Contents#

Toggle Props
Toggle Button Props
Toggle Button Group Props

Toggle Props#

Prop	Type	Default	Description
value	string	-	The value associated with the toggle, passed to onChange when clicked.
children	React.ReactNode	-	Content to be displayed inside the toggle.
className	string	''	Additional CSS class for the toggle element.
defaultSelected	boolean	false	Whether the toggle is initially selected.
outline	boolean	false	Whether the toggle has an outline style.
disabled	boolean	false	Whether the toggle is disabled.
size	small medium large	'medium'	Size of the toggle button.
onChange	(value: string, selected: boolean) => void	-	Callback when the toggle selection state changes.

Toggle Button Props#

Prop	Type	Default	Description
value	string	-	The value associated with the toggle button.
children	React.ReactNode	-	Content to be displayed inside the toggle button.
className	string	''	Additional CSS class for the toggle button element.

Toggle Button Group Props#

Prop	Type	Default	Description
children	React.ReactNode	-	Toggle buttons to be rendered inside the group.
type	single multiple	-	Defines whether one or multiple toggles can be selected at once.
defaultValue	string string[]	-	Initial selected value(s) for the group.
onChange	(value: string string[]) => void	-	Callback when the selected value(s) change.
className	string	''	Additional CSS class for the toggle button group element.
outline	boolean	false	Whether the toggle buttons in the group use the outline style.
disabled	boolean	false	Whether the toggle button group is disabled.