> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/mui/base-ui/llms.txt
> Use this file to discover all available pages before exploring further.
# Toggle
> A two-state button that can be on or off.
A two-state button that can be on or off.
## Import
```jsx theme={null}
import { Toggle } from '@base-ui/react/toggle';
```
## Basic Usage
```jsx theme={null}
Toggle me
```
## Key Features
* Two-state button (pressed/unpressed)
* Controlled and uncontrolled modes
* Works within Toggle Group
* Accessible with proper ARIA attributes
* Custom render props
## Key Props
### pressed
**Type:** `boolean`
Whether the toggle button is currently pressed. Use with `onPressedChange` for controlled mode.
```jsx theme={null}
const [pressed, setPressed] = React.useState(false);
Toggle
```
### defaultPressed
**Type:** `boolean`
**Default:** `false`
Whether the toggle button is initially pressed. Use for uncontrolled mode.
```jsx theme={null}
Initially Pressed
```
### onPressedChange
**Type:** `(pressed: boolean, eventDetails: ChangeEventDetails) => void`
Callback fired when the pressed state is changed.
```jsx theme={null}
console.log('Pressed:', pressed)}>
Toggle
```
### disabled
**Type:** `boolean`
**Default:** `false`
Whether the component should ignore user interaction.
```jsx theme={null}
Disabled Toggle
```
### value
**Type:** `string`
A unique string that identifies the toggle when used inside a toggle group.
```jsx theme={null}
Bold
Italic
```
## Styling
```jsx theme={null}
Toggle
```
```jsx theme={null}
Toggle
```
```css theme={null}
.toggle {
padding: 0.5rem 1rem;
border: 1px solid #d1d5db;
border-radius: 0.375rem;
}
.toggle:hover {
background-color: #f9fafb;
}
.toggle[data-pressed] {
background-color: #3b82f6;
color: white;
border-color: #3b82f6;
}
.toggle[data-pressed]:hover {
background-color: #2563eb;
}
.toggle[data-disabled] {
opacity: 0.5;
cursor: not-allowed;
}
```
## Common Patterns
### Icon Toggle
```jsx theme={null}
function BoldToggle() {
const [pressed, setPressed] = React.useState(false);
return (
);
}
```
### Text Formatting Toggles
```jsx theme={null}
function TextEditor() {
const [bold, setBold] = React.useState(false);
const [italic, setItalic] = React.useState(false);
const [underline, setUnderline] = React.useState(false);
return (
B
I
U
);
}
```
### With Tooltip
```jsx theme={null}
import { Tooltip } from '@base-ui/react/toggle';
Add to favorites
```
### Color Picker Toggle
```jsx theme={null}
function ColorToggle({ color, label }) {
const [pressed, setPressed] = React.useState(false);
return (
{pressed && (
)}
);
}
```