Announcement

Installation#

# One-time setup (tokens + lib helpers)
npx koalaui-cli@latest init

# Activate your Pro license (once per machine)
npx koalaui-cli@latest login <key>

# Add this component (its dependencies come along)
npx koalaui-cli@latest add announcement

Usage#

Playground#

The controls come straight from the recipe, so the two style axes are all there is: the surface it sits on, and whether it behaves like a link. Note that interactive is not something you normally set, it follows asChild on its own.

Nesting a Badge#

This is what the pill is for: a standing label plus the thing being announced. Drop a Badge in and the recipe handles the nesting. It tightens its padding to 4px on the side the badge sits on, so the chip nests in an even crescent instead of floating with a wide gap on its outer side, and it trades the badge's own hairline for a fill, so you get one stroke around one chip instead of two borders four pixels apart. Works with the badge trailing, leading, or alone.

The horizontal padding is decided per edge, by whatever sits on it: bare text gets 16px, an icon or a dot 12px, a nested badge 4px. That is an optical correction, not a scale. Against a fully round cap the curve recedes from the baseline, so a word set at the same distance as a shape reads as drifting into the edge, while a chip or a glyph nests inside the curve and needs no help.

The label is held off the chip by 16px as well, not by the row's 8px gap. 8px is the distance between a mark and its own label, a dot and the word it belongs to; the label and the chip are two separate pieces of information, and at 8px they read as one run of text with a box drawn round half of it. A badge next to an icon keeps the 8px: a glyph already reads as separate.

Dot and glyph#

For a one-line announcement there is nothing to pair, so skip the badge: dot renders the same small mark a dot Badge carries, in the current text color. A leading icon works too, and the recipe sizes it to 16px.

Over media#

variant="glass" is the pill for a photo or video hero: a translucent white surface with a backdrop blur, sized for the scrim rather than for the theme. A nested badge goes white with it, dot included, because a brand-colored dot clashes over a photograph.

PreviewCode

Now in private beta

Series A$61M to scale support

As a link#

Pass asChild to render the pill as an <a> pointing at the changelog. The hover, focus and press affordances follow asChild on their own, so a static pill never scales under a cursor that cannot click it, and the hit area is padded out to 40px tall without changing how the pill looks.

In a hero#

Where it earns its keep. The pill is the first child of HeroContent (or of HeroColumn in a split hero), above the title. It used to be a Hero part, but nothing ties it to one: the same pill sits in a navbar, over a pricing table, or at the top of a changelog entry.

API reference#

FAQ#