# components/SwitchGlyph (zidane-ui)

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

## Components

### `SwitchGlyph`

Component.

Renders the on/off glyph: a track with a thumb. It is decoration only (`aria-hidden`); the
control around it owns the state and the semantics.

```ts
function SwitchGlyph(props: SwitchGlyphProps): Element
```

**Parameters**

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

**Returns** `Element`

**Props**

- `className?` (`string`): Extra classes on the root element.
- `on` (`boolean`): Whether the switch is on: the accent fill with the thumb at the right.
- `size?` (`'sm' | 'md'`): Glyph size: `md` for settings rows, `sm` for menu rows and compact toggles.
- `style?` (`CSSProperties`): Inline styles on the root element, merged after the component's own.

Source: [ui/src/components/SwitchGlyph.tsx:33](https://github.com/Tahul/zidane/blob/main/ui/src/components/SwitchGlyph.tsx#L33)

## Interfaces

### `SwitchGlyphProps`

Interface.

Props for [`SwitchGlyph`](https://zidane.si/docs/reference/ui-components-switch-glyph.md#SwitchGlyph).

```ts
interface SwitchGlyphProps
```

**Properties**

- `className?` (`string`): Extra classes on the root element.
- `on` (`boolean`): Whether the switch is on: the accent fill with the thumb at the right.
- `size?` (`'sm' | 'md'`): Glyph size: `md` for settings rows, `sm` for menu rows and compact toggles.
- `style?` (`CSSProperties`): Inline styles on the root element, merged after the component's own.

Source: [ui/src/components/SwitchGlyph.tsx:16](https://github.com/Tahul/zidane/blob/main/ui/src/components/SwitchGlyph.tsx#L16)