Toggle

A two-state button that can be either on or off.

Basic usage

import { Toggle } from '@streamelements/frontend-ui';

export function ToggleExample() {
  return (
    <Toggle aria-label="Toggle Me">
      Toggle Me
    </Toggle>
  );
}

Props

Root

Name	Type	Default value	Description
css	CSS	{}	Pass on additional styling utilizing Stitches' tokens
asChild	boolean	–	Change the component to the HTML tag or custom component of the only child. This will merge the original component props with the props of the supplied element/component and change the underlying DOM node.
disabled	boolean	–	When true, prevents the user from interacting with the item
defaultPressed	boolean	–	The pressed state of the toggle when it is initially rendered. Use when you do not need to control its pressed state.
pressed	boolean	–	The controlled pressed state of the toggle. Must be used in conjunction with in conjunction with. Must be used in conjunction with onPressedChange
onPressedChange	(next: boolean) => void	–	A unique value for the item

Check out more detailed docs on Radix docs