# UiLabel

> Chips that name a product's controls inside help-doc prose: one chip per button, menu or setting, and a path of chips joined by arrows for where to click in order.

```ts
import { UiLabel } from "@sdxc/ui/docs";
```

Renders a control's name as a light, hairline-bordered chip in the sans face, so it
reads as something on screen rather than as code. It never breaks inside, and sizes
relative to the sentence around it.

## Examples

```tsx
Click <UiLabel>{t("monitors.add")}</UiLabel> to open the form.
```

## Props

| Prop | Type | Description |
| --- | --- | --- |
| `children` | `RemixNode` |  |

Also accepts everything in `TagProps<"span">`.


## Also exported

- `UiPath`