Component primitive

Brand Alert

<brand-alert> pairs a status icon, clear title, and useful next step. The icon is supplied automatically and can be replaced through the icon slot.

<brand-alert>Framework-agnostic custom element

Light themeSemantic surface

Dark themeSame component API

Element: <brand-alert>
Library: Brand
Runtime: Web Component
Theming: Semantic tokens

Variants

New workspace policyReview the updated sharing rules before inviting collaborators.

Changes savedYour profile is now up to date.

Approval requiredA workspace owner must approve this change.

Upload failedCheck the file type and try again.

Scheduled maintenanceAdmin tools will be unavailable for ten minutes.

Fill (solid)

Invitation sent. The new member will receive an email shortly.

Connection lost. Reconnect before saving more changes.

Soft (pale tint)

Tip: Add a recovery email to protect your account.

Draft only: Publish the page when review is complete.

Closable

Keyboard shortcuts enabledDismiss this notice when you are ready.

Usage

import { BrandAlert } from '@brandos/ui';

<brand-alert variant="success" open>
  <strong>Saved.</strong> Your changes are live.
</brand-alert>

// JS, toast notification
const alert = document.createElement('brand-alert');
alert.setAttribute('variant', 'success');
alert.textContent = 'Saved!';
alert.toast();