Koala UIAnnouncement
The pill above a hero title: a standing label paired with the thing being announced. Single-element like Badge, and it nests a Badge for the announced half without drawing a second border around it.
Installation#
Usage#
import { Announcement } from "@/components/ui/announcement"
import { Badge } from "@/components/ui/badge"
export function Example() {
return (
<Announcement>
Update available
<Badge variant="orange" dot pill>Koala UI v11 is here!</Badge>
</Announcement>
)
}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.
The surface it sits on: a hairline card pill, or glass over media.
Pair the standing label with the release, the shape the pill exists for.
A leading dot instead of a nested badge, for the one-line shape.
Render the pill as a link, which turns on hover, focus and press.
<Announcement>
Update available
<Badge variant="orange" dot pill>Koala UI v11 is here!</Badge>
</Announcement>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.
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.
<Hero>
<HeroContent>
<Announcement>
Update available
<Badge variant="orange" dot pill>Koala UI v11 is here!</Badge>
</Announcement>
<HeroTitle>A Design System built for AI-Powered Products</HeroTitle>
{/* … */}
</HeroContent>
</Hero>API reference#
Announcement
A single element that forwards every native <div> prop and merges className last. The children are the content: a label, a nested Badge, an icon, or any combination of them.
variant
"solid" (default), the hairline card pill for a normal surface, or "glass", the translucent pill for a photo or video hero.
data-lead · data-trail
Not props: the component reads its own children and writes what sits on each edge, "text" or "shape", onto the element for the recipe to match. CSS cannot work this out for itself: :first-child counts elements, and a label arrives as a text node, so a selector reads a label plus a badge as a pill holding one lone chip and spaces it as though the words were not there.
dot
Renders a leading dot in the current text color. Use it for the one-line shape; when a badge is nested, let the badge carry the dot instead.
asChild · interactive
asChild renders the pill styles onto a single child element (Radix Slot), typically a link, and Slottable keeps the dot inside that element so it belongs to the same hit area. interactive defaults to whatever asChild is and carries the cursor, the hover, the focus ring and the press scale. Set it explicitly only for a pill that is clickable without asChild. To hold a linked pill still, reach for static instead, which drops the press scale alone: interactive={false} would take the focus ring with it.