Callout
A docs aside for the one thing a reader must not miss.
View code
<Callout kind="warning" label="Warning">
<p>Rotating the signing key logs every user out. Deploy the new key before you remove the old one.</p>
</Callout>
<Callout kind="tip" label="Tip" title="Faster local runs">
<p>Pass <code>--watch</code> and only the tests touching a changed file run again.</p>
</Callout>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 { Callout } from "@sdxc/ui/docs";Renders the aside: a 6% tint with a 30% border of the kind's colour, a small radius, and a heading line led by the glyph in the kind's colour. Text keeps the page's ink in both themes, so a long callout reads like the prose around it.
Examples
<Callout kind="tip" label={t("callout.tip")} title="Faster local runs">Pass `--watch`.</Callout>Props
Read from the component's own types, so every prop, every default and every allowed value is listed.
| Prop | Type | Required | Description |
|---|---|---|---|
kind | "note" | "tip" | "warning" | "danger" | Yes | |
label | string | Yes | The kind's name in the reader's language ("Note", "Warning"). It is the aside's accessible name and its visible heading when no title is given. |
title | string | No | A specific heading that replaces the label on screen; the accessible name keeps both. |
children | RemixNode | Yes |
Also accepts everything in Omit<TagProps<"aside">, "title">.
Types
| Name | Values | What it decides |
|---|---|---|
Kind | "note" | "tip" | "warning" | "danger" | How serious the aside is, from adding context to warning of loss. |