# components/IconToggle (zidane-ui)

Import: `import { … } from 'zidane-ui'`. Source: [ui/src/components/IconToggle.tsx](https://github.com/Tahul/zidane/blob/main/ui/src/components/IconToggle.tsx).

## Components

### `IconToggle`

Component.

Icon control for the panel toolbars, meant to sit in a `.zg-segment`
group (pressed = the raised chip). `label` doubles as the accessible name
and the tooltip (portalled: these sit in clipped rows). Keep it to a word
or two.

```ts
function IconToggle(props: IconToggleProps): Element
```

**Parameters**

- `props` (`IconToggleProps`): Component props.

**Returns** `Element`

**Props**

- `active` (`boolean`): Whether the toggle is pressed. Shows the raised chip and sets `aria-pressed`.
- `badge?` (`string`): Count next to the icon (changed-files toggle), in the meta voice.
- `className?` (`string`): Extra classes on the root element.
- `icon` (`string`): Icon class for the glyph, such as `i-ph-sidebar-simple`.
- `label` (`string`): Accessible name and tooltip text. Keep it to a word or two.
- `onClick` (`() => void`): Called when the toggle is clicked.
- `size?` (`'xs' | 'sm'`, default `'sm'`): Button height: `xs` is 20px, `sm` is 24px.
- `style?` (`CSSProperties`): Inline styles on the root element, merged after the component's own.

Source: [ui/src/components/IconToggle.tsx:37](https://github.com/Tahul/zidane/blob/main/ui/src/components/IconToggle.tsx#L37)

## Interfaces

### `IconToggleProps`

Interface.

Props for [`IconToggle`](https://zidane.si/docs/reference/ui-components-icon-toggle.md#IconToggle).

```ts
interface IconToggleProps
```

**Properties**

- `active` (`boolean`): Whether the toggle is pressed. Shows the raised chip and sets `aria-pressed`.
- `badge?` (`string`): Count next to the icon (changed-files toggle), in the meta voice.
- `className?` (`string`): Extra classes on the root element.
- `icon` (`string`): Icon class for the glyph, such as `i-ph-sidebar-simple`.
- `label` (`string`): Accessible name and tooltip text. Keep it to a word or two.
- `onClick` (`() => void`): Called when the toggle is clicked.
- `size?` (`'xs' | 'sm'`, default `'sm'`): Button height: `xs` is 20px, `sm` is 24px.
- `style?` (`CSSProperties`): Inline styles on the root element, merged after the component's own.

Source: [ui/src/components/IconToggle.tsx:7](https://github.com/Tahul/zidane/blob/main/ui/src/components/IconToggle.tsx#L7)