Announcement

A compact pill for news, releases and status — a tag, a message and an optional link.

ErrorSomething went wrongSuccessNew feature addedWarningApproaching your limitInfoWelcome to the platform
Installation
$Terminal
npx shadcn@latest add https://sdk-components.thesqd.com/r/announcement.json
Usage
Import from the master file. Pass a `variant`, a `tag` and a `title` — add `href` to make it a link.
TSImport
import { Announcement } from "@/components/ui/announcement";
TSExample
import { Announcement } from "@/components/ui/announcement";

export function Example() {
  return <Announcement variant="success" tag="New" title="Workflow builder is live" href="/blocks/workflow-builder" />;
}
Composition
Anatomy of the Announcement primitive.
Announcement                      (single component — pass everything as props)
├── surface                       .card-surface, rounded-full — hairline, ring and
│                                 theme-aware shadow — the same neutral hairline
│                                 on every tone; tones tint the fill (opaque, mixed
│                                 into --card, so it holds on any background)
├── variant="default | brand | info | success | warning | destructive"
├── tag={<ReactNode>}             (the chip on the left — "New", "Beta", "Error";
│                                 always a visible chip, its color at 15%)
├── tagVariant="…same tones…"     (the tag's own color — differs from `variant`
│                                 for a duotone pill; defaults to `variant`)
├── title={<ReactNode>}           (the message; falls back to children)
├── href / target / rel           (the whole pill becomes a link)
├── linkAs={Link}                 (your router's link for client-side navigation)
├── onClick={() => void}          (a button instead, when there's no href)
└── arrow={boolean}               (trailing ↗ — on by default when interactive;
                                   nudges up-right on hover, with a shadow lift)
Default
The plain card surface with a neutral tag.
BetaTry the new file browser
Brand
Squad Violet, linking through Next's Link with `linkAs`.
NewThe workflow builder is here
Info
A sky tint for general information.
InfoWelcome to the platform
Success
A green tint for launches and good news.
SuccessNew feature added
Warning
An amber tint for limits and deadlines.
WarningApproaching your limit
Destructive
A red tint for errors and outages.
ErrorSomething went wrong
Duotone
`tagVariant` gives the tag its own color, independent of the pill's `variant`.
NewWorkflow builder is liveBetaTry instant navigationHeads upMaintenance on Sunday
Static
No `href` or `onClick`: a plain pill, with no arrow and no hover lift.
v2.4Released September 28
Button
`onClick` instead of `href` renders a button.
API Reference
Props exposed by the Announcement component.
PropTypeDefaultDescription
variant"default" | "brand" | "info" | "success" | "warning" | "destructive""default"Color treatment. `default` is the plain card surface; the rest tint it — the same vocabulary as Banner and Alert.
tagReactNode—The chip on the left of the pill.
tagVariant"default" | "brand" | "info" | "success" | "warning" | "destructive"—The tag's own color. Set it to something other than `variant` for a duotone pill. Defaults to `variant`.
titleReactNode—The message. Falls back to `children`.
hrefstring—Makes the whole pill a link, with a trailing arrow.
targetstring—Anchor target when `href` is set.
relstring—Anchor rel. Defaults to `noopener noreferrer` when `target="_blank"`.
linkAsReact.ElementType"a"What `href` renders as — pass Next's `Link` for client-side navigation.
onClick(event) => void—Makes the pill a button, with a trailing arrow. Ignored when `href` is set.
arrowboolean—Show the trailing arrow. Defaults to on whenever the pill is interactive, off otherwise.
classNamestring—Override or extend the resolved variant classes.