Open this component in Storybook
The <dsgn-callout> component sets a short passage apart from the surrounding
content — a note, a tip, a warning, or something dangerous. The tone sets the
colour and a matching icon; the title and body are your own content.
Usage
<dsgn-callout tone="tip">
<span slot="title">Pin your token version</span>
Lock `@ds-gn/tokens` to an exact version to keep builds reproducible.
</dsgn-callout>Import the component module in your application entrypoint:
import '@ds-gn/ui/callout';Props
| Prop | Type | Default | Description |
|---|---|---|---|
| surface | 'light' | 'dark' | 'light' | Semantic token surface to use. |
| tone | 'note' | 'tip' | 'warning' | 'danger' | 'note' | Sets the colour and icon. |
Slots
| Slot | Description |
|---|---|
| (default) | Callout body. Inline markup such as links works. |
| title | Optional heading, rendered in bold above the body. |
The component renders no copy of its own; follow the content ownership policy for the title and body.
Examples
Warning
<dsgn-callout tone="warning">
<span slot="title">Breaking change</span>
Renaming a token changes the public API for every consumer.
</dsgn-callout>Without a title
<dsgn-callout tone="note">
Adapters apply as patches on top of the core template.
</dsgn-callout>Dark surface
<dsgn-callout surface="dark" tone="danger">
Never commit registry credentials.
</dsgn-callout>Accessibility
The callout renders as an <aside role="note">, so assistive technology
announces it as supplementary content without interrupting the reader — it is
not an alert. The tone icon is decorative and hidden from assistive technology,
so colour and icon never carry meaning on their own: put the meaning in the
title or body text (for example, start a warning’s title with “Warning”).