docs / core / announcement
Announcement
a pill that pairs a solid leading badge with a short label, for release notes and the one warning you cannot bury.
intensity · recedesrsc · server
provenance
shaped from sisu-pluslayer
core / primitivesintensity
recedes · safe anywhere, including dense surfacescomposition
sits above the fold, usually over a hero headinghref points at the changelog or the announcement itselfone per page. two announcements cancel each other outnot a row label. status inside content is Badgea11y
a plainspan without href, a real link with it · the arrow is aria-hiddenjest-axedependencies
class-variance-authoritylive demo · try it out
customize
badgesolid leading badge, one word
labelthe text after the badge
tonecolor of the leading badge
hrefrender a link with a trailing arrow
usage
import { Announcement } from "@usva-ui/react/primitives/announcement";
<Announcement badge="NEW" href="/changelog">v2.0.1 just shipped</Announcement>props
| prop | type | default | notes |
|---|---|---|---|
| badge | ReactNode | — | the solid leading badge, e.g. NEW. keep it to one word. |
| tone | "live" | "accent" | "accent-alt" | "success" | "warning" | "danger" | "live" | color of the leading badge. |
| href | string | — | renders a real link with a trailing arrow. |
get it
bun add @usva-ui/reactusage
import { Announcement } from "@usva-ui/react/primitives/announcement";
<Announcement badge="NEW" tone="live" href="/changelog">
v2.0.1 just shipped
</Announcement>