A two-state button that can be either on or off.
import React from 'react';
import * as Toggle from '@radix-ui/react-toggle';
import { FontItalicIcon } from '@radix-ui/react-icons';
import './styles.css';
const ToggleDemo = () => (
<Toggle.Root className="Toggle" aria-label="Toggle italic">
<FontItalicIcon />
</Toggle.Root>
);
export default ToggleDemo;
Install the component from your command line.
npm install @radix-ui/react-toggle
Import the component.
import * as Toggle from '@radix-ui/react-toggle';
export default () => <Toggle.Root />;
The toggle.
| Prop | Type | Default |
|---|---|---|
asChild | boolean | false |
defaultPressed | boolean | |
pressed | boolean | |
onPressedChange | function | |
disabled | boolean |
| Data Attribute | Values |
|---|---|
[data-state] | "on" | "off" |
[data-disabled] | Present when disabled |
| Key | Description |
|---|---|
| Space | Activates/deactivates the toggle. |
| Enter | Activates/deactivates the toggle. |