Banner

Inline alert-style messaging from @duo/ui.

Examples

Property	Attribute	Description	Type name	Type	Default
`variant`	`variant`	Visual variant (`primary`, `secondary`, `success`, `danger`, `warning`, `info`, `light`, `dark`)	`DuoBannerVariant`	`"primary" \| "secondary" \| "success" \| "danger" \| "warning" \| "info" \| "light" \| "dark"`	`"danger"`

Name	Description
`default`	Message body; place `<a href>` for actions (bold underlined, inherits banner colors). Danger and warning show a leading warning icon; info shows a leading info icon (decorative).

The Banner component (duo-banner) highlights contextual messages on a page.

Success: Your changes were saved.

Warning: This action cannot be undone.

Set variant to one of the supported tokens (for example primary, info, danger). Place the message in the default slot:

<duo-banner variant="info">
  <strong>Note:</strong> See the <a href="/getting-started/installation">get started guide</a> for setup.
</duo-banner>

Links inside the banner inherit banner colors and are styled for readability.