UiLabel
Chips that name a product's controls inside help-doc prose.
Open the monitor, click Pause checks, then confirm with Pause.
View code
<p>
Open the monitor, click <UiLabel>Pause checks</UiLabel>, then confirm with <UiLabel>Pause</UiLabel>.
</p>Demo docs sites
Whole pages built only from @sdxc/ui, each for an invented product with its own palette and type. They open in a new tab.
- Content docsDriftwood DocsGuides for Driftwood, a command line that deploys static sites: a tutorial, how-to guides and concept pages./demo/docs/driftwood
- Component docsLattice DocsDocs for Lattice UI, a component library: an index of components, each with live previews, props and accessibility notes./demo/docs/lattice
- API referenceParcelo DocsThe HTTP API reference for Parcelo, a shipping-label API: resources, endpoints with request and response fields, and examples in three languages./demo/docs/parcelo
- Utilities docsTempo DocsReference for Tempo, an invented library of CSS utilities: every spacing, colour, layout, type and effect utility drawn beside its call and the CSS it emits./demo/docs/tempo
Every demo, landings and docs sites alike, is listed in the demo gallery.
Installation
An ordinary dependency: install it, import the theme once, and import the component where it is used.
npm add @sdxc/ui remiximport "@sdxc/ui/theme.css";Usage
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.
Props
Read from the component's own types, so every prop, every default and every allowed value is listed.
| Prop | Type | Required | Description |
|---|---|---|---|
children | RemixNode | Yes |
Also accepts everything in TagProps<"span">.
Also exported
Other components this module publishes.
UiPath