UI kit reference

components/IconToggle

import { … } from 'zidane-ui'ui/src/components/IconToggle.tsx

sizes xs, sm, md, lg

active, danger, disabled

node icon, badge, render as link

IconToggle in a segment

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.

TypeScript

function IconToggle(props: IconToggleProps): Element

Parameters

Parameters
Name	Type	Description
props	`IconToggleProps`	Component props.

Returns

Element

Props

IconToggle props
Name	Type	Default	Description
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'`	`'sm'`	Button height: `xs` is 20px, `sm` is 24px.
style?	`CSSProperties`		Inline styles on the root element, merged after the component's own.

ui/src/components/IconToggle.tsx:37

Interfaces#

`IconToggleProps`Interface#

Props for IconToggle.

TypeScript

interface IconToggleProps

Properties

IconToggleProps properties
Name	Type	Default	Description
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'`	`'sm'`	Button height: `xs` is 20px, `sm` is 24px.
style?	`CSSProperties`		Inline styles on the root element, merged after the component's own.

ui/src/components/IconToggle.tsx:7