Content

Badge & Kbd

:badge adds a colored inline label, :kbd a keyboard key. Both are text directives: they sit inside a sentence.

Live demo

Click the deck, then use ← → · 2 slides · 00:11Open fullscreen →

Syntax

MarkdownMarkdown
:badge[v0.1]{type=primary} :badge[Stable]{type=success}

Press :kbd[T] to switch theme.
MDXMDX
<Badge type="success">Stable</Badge> <Kbd>Ctrl</Kbd>

Attributes and props

AttributeTypeDefaultDescription
type (Badge)default | primary | success | warning | dangerdefaultColor

Kbd takes no attribute: its content is the key label.

In other formats

FormatStatusNotes
deckAvailableRendered in slides, the presenter console and the HTML and PDF exports.
docsAvailableThrough <StoryEmbed slug="…" /> in any page of a site.
motionAvailableAnimated block in a film.
reportPlanned · P6Section of a paged report.
toonPlanned · P7Panel of a vertical strip.
bookPlanned · P8Block of a printable chapter.
Last modified on