Alert Bar

stable

Slim, edge-to-edge alert with a label, message, and optional link. Drop it into any page's sections list — five tone variants for different intents.

Live Preview

UpdateRegistration for the 2026–2027 season closes on August 31.

tsx

<AlertBar
/>

Controls

Tone

tone

Palette variant — pick by intent (info / warning / success / danger / neutral).

Label

label

Short caps tag at the left. Blank to hide.

Message

text

Link Label

linkLabel

Link URL

linkHref

Open link in new window

linkNewWindow

false

Variants

All five tones

tone="info"

INFOThis is a info alert. Register for the 2026–2027 season before it closes.

tone="warning"

WARNINGThis is a warning alert. Register for the 2026–2027 season before it closes.

tone="success"

SUCCESSThis is a success alert. Register for the 2026–2027 season before it closes.

tone="danger"

DANGERThis is a danger alert. Register for the 2026–2027 season before it closes.

tone="neutral"

NEUTRALThis is a neutral alert. Register for the 2026–2027 season before it closes.

Minimal

No label, no link

Field 3 at Matthews Sportsplex is closed for maintenance this weekend.

Props

Prop	Type	Default	Description
`tone`	`"info" \| "warning" \| "success" \| "danger" \| "neutral"`	`"info"`	Palette variant.
`label`	`string`	`—`	Optional caps tag at the left (e.g. "Update", "New").
`text`	`string`	`—`	The alert copy. Required.
`linkLabel`	`string`	`—`	Right-side link text. Omit to hide the link entirely.
`linkHref`	`string`	`—`	Link destination. Required whenever linkLabel is set.
`linkNewWindow`	`boolean`	`false`	Open the link in a new browser tab.