AnnouncementChip

A short announcement above a hero.

Scheduled maintenance windowsNew: heartbeat monitorsChangelogLaunching multi-region checks

View code

tsx

<AnnouncementChip href="/examples/changelog/custom-domains">
	Status pages now support custom domains
</AnnouncementChip>

<AnnouncementChip variant="soft">Scheduled maintenance windows</AnnouncementChip>
<AnnouncementChip variant="pill">New: heartbeat monitors</AnnouncementChip>
<AnnouncementChip variant="mono">Changelog</AnnouncementChip>
<AnnouncementChip variant="special" href="/examples/changelog/multi-region">
	Launching multi-region checks
</AnnouncementChip>

Demo landings

Whole pages built only from @sdxc/ui, each for an invented product with its own palette and type. They open in a new tab.

Every demo, landings and docs sites alike, is listed in the demo gallery.

Installation

An ordinary dependency: install it, import the theme once, and import the component where it is used.

Terminal

npm add @sdxc/ui remix

typescript

import "@sdxc/ui/theme.css";

Usage

typescript

import { AnnouncementChip } from "@sdxc/ui/landing";

Renders the announcement as a span, or an a with a trailing arrow when href is set, styled by the shared eyebrow looks.

Examples

tsx

<AnnouncementChip variant="special">{t("hero.launch")}</AnnouncementChip>

Props

Read from the component's own types, so every prop, every default and every allowed value is listed.

Prop	Type	Required	Description
`mix`	`TagProps<"span">["mix"]`	No	Extra styling, applied after the chip look.
`variant`	`Variant`	No	Look. Defaults to DEFAULT_VARIANT.
`href`	`string`	No	Turns the chip into a link with a trailing arrow.
`children`	`RemixNode`	Yes	Announcement label — always supplied by the page.