Launch prototype

Components

Alert

A dismissible, actionable banner for system-level messages. Two layouts - floating and full-width - composed from Button, CloseButton, and FeaturedIcon. Colours and demo sections are driven from config/design-system.config.ts.

Component Playground

Live instance - the controls read their options from the same config that drives the Variants section below.

Update available

A new version of DEW is ready to install.

floating · default

Controls

Type

Colour

Title

Description

Confirm label

Dismiss label

Floating

A self-contained card - for toasts, in-page notices, or anywhere the alert sits among other content rather than spanning the viewport.

Default

Update available

A new version of DEW is ready to install.

Colours

Six colours, each pairing a FeaturedIcon tint with a matching icon (info/alert/check).

Default alert

This is what a message in this colour looks like.

Brand alert

This is what a message in this colour looks like.

Gray alert

This is what a message in this colour looks like.

Error alert

This is what a message in this colour looks like.

Warning alert

This is what a message in this colour looks like.

Success alert

This is what a message in this colour looks like.

Full width

Spans its container edge-to-edge - for top-of-page announcement bars. Shown here inside a clipped preview frame.

Scheduled maintenance

DEW will be briefly unavailable this Sunday at 2am UTC.

Set actionType="link" for text-link actions instead of buttons - lower visual weight for less urgent banners.

New feature: Dark mode

Try it from your account settings.

Contained

Pass contained for an alert that sits among other content, such as a form or a record page: a rounded card with a border and a background tinted by color. The card's look comes from the component; don't add border, background or padding classes. Add wrap when the description is longer than a line, or inline to keep a short notice and its action on one line.

This species already has an open nomination

NSS-2026-00004 was returned for more information.

Details missing

Complete these to continue: Project name, Abstract, Start date.

7 flagged concepts need review across this project

Action combinations

Both action handlers are optional - the button row only renders for whichever ones you pass.

Confirm only

No onClose handler passed - no dismiss button, no close X.

Dismiss only

No onConfirm handler passed - no confirm action, just a close X.

API - AlertFloating

Prop	Type	Default
`title`	`string`	`-`
`description`	`ReactNode`	`-`
`confirmLabel`	`string`	`-`
`dismissLabel`	`string`	`"Dismiss"`
`color`	`"default" \| "brand" \| "gray" \| "error" \| "warning" \| "success"`	`"default"`
`onClose`	`() => void`	`-`
`onConfirm`	`() => void`	`-`

API - AlertFullWidth

Prop	Type	Default
`title`	`string`	`-`
`description`	`ReactNode`	`-`
`confirmLabel`	`string`	`-`
`dismissLabel`	`string`	`"Dismiss"`
`actionType`	`"button" \| "link"`	`"button"`
`color`	`"default" \| "brand" \| "gray" \| "error" \| "warning" \| "success"`	`"default"`
`onClose`	`() => void`	`-`
`onConfirm`	`() => void`	`-`
`className`	`string`	`-`
`tintedBackground`	`boolean`	`false`
`hideDismissButton`	`boolean`	`false`
`contained`	`boolean`	`false`
`wrap`	`boolean`	`false`
`inline`	`boolean`	`false`

Composition

Alert doesn't define its own visual primitives - it composes three components that already exist in this design system: Button for its actions, CloseButton for dismissal, and FeaturedIcon for the coloured icon badge. Components inherit from other components, not just from primitives - this is why Alert took no new base-level styling work, only the tokens FeaturedIcon needed.

Token anatomy

Each colour maps to a FeaturedIcon theme + colour pair. default uses the modern theme (neutral surface, no tint); every other colour uses outline (a soft ring in that colour, no fill).

Colour	Icon	FeaturedIcon theme	Icon colour token
default	`InfoCircle`	`modern`	`text-fg-secondary`
brand	`InfoCircle`	`outline`	`text-fg-brand-primary`
gray	`InfoCircle`	`outline`	`text-fg-tertiary`
error	`AlertCircle`	`outline`	`text-fg-error-primary`
warning	`AlertCircle`	`outline`	`text-fg-warning-primary`
success	`CheckCircle`	`outline`	`text-fg-success-primary`

Usage

import { AlertFloating } from "@/components/application/alerts/alerts";

<AlertFloating
  title="Update available"
  description="A new version of DEW is ready to install."
  confirmLabel="Update now"
  onConfirm={() => {}}
  onClose={() => {}}
/>

Figma

No linked Figma file yet - this component was pulled in via the Untitled UI CLI, not designed in Figma first.