);
}
function HeartFilledIcon(props: React.ComponentProps<'svg'>) {
return (
);
}
function HeartOutlineIcon(props: React.ComponentProps<'svg'>) {
return (
);
}
```
```tsx
/* stencil-toggle.tsx */
'use client';
import * as React from 'react';
import { StencilToggleView } from './stencil-toggle-view';
export default function StencilToggle() {
const [pressed, setPressed] = React.useState(false);
return setPressed(event.detail.pressed)} />;
}
```
```tsx
/* stencil-toggle-view.tsx */
import * as React from 'react';
import type { TogglePressedChangeDetail } from 'finesoft-components/define-custom-elements';
export function StencilToggleView({ pressed = false, onPressedChange }: { pressed?: boolean; onPressedChange?: (event: CustomEvent) => void }) {
return (
{pressed ? : }
);
}
function HeartFilledIcon(props: React.ComponentProps<'svg'>) {
return (
);
}
function HeartOutlineIcon(props: React.ComponentProps<'svg'>) {
return (
);
}
```
The Stencil example uses `fs-toggle`. The component owns its uncontrolled pressed state;
the visible `pressedChange` listener only chooses the icon, replacing React's render callback.
The shared `stencil-toggle-view.tsx` is used by both the live example and its server-rendered preview.
`native-button="false"` uses a span with button semantics. React's `render` callback is not a
Web Component property: use slotted content and the public change event instead. `type` and
`form` overrides are ignored, and `value` is not submitted as a native button value, matching Base UI.
Inside `fs-toggle-group`, selection, disabled inheritance, and the roving tab stop are managed
by the migrated group. Grouped Space activation occurs on keydown, matching Base UI's composite
behavior. Inside `fs-toolbar-root`, the toolbar supplies the outer roving tab stop.
Use `fs-toolbar-button asChild` to compose a focusable-when-disabled toolbar toggle.
## Anatomy
Import the component and use it as a single part:
```jsx title="Anatomy"
import { Toggle } from '@base-ui/react/toggle';
;
```
## API reference
### Toggle
A two-state button that can be on or off.
Renders a `