Banner

A full-width, dismissible announcement bar.

🎉 ng-blatui — accessible Angular components, copy & paste.Read more

import { BuiBanner } from 'ng-blatui';

<bui-banner tone="primary" class="rounded-lg">🎉 ng-blatui — accessible Angular components.</bui-banner>

Tones

Heads up — scheduled maintenance tonight at 2am UTC.

Your plan was upgraded to Pro.

Your trial ends in 3 days.

Your payment method failed.

<!-- tone="primary | info | success | warning | danger | default" -->
<bui-banner tone="success">Your plan was upgraded to Pro.</bui-banner>
<bui-banner tone="warning">Your trial ends in 3 days.</bui-banner>

API reference

Inputs

Prop	Type	Default	Description
`tone`	`"danger" \| "default" \| "info" \| "primary" \| "success" \| "warning"`	`'default'`	Color tone (`default \| primary \| info \| success \| warning \| danger`).
`dismissible`	`boolean`	`true`	Whether to show the dismiss button.
`persistKey`	`string`	`undefined`	When set, the dismissal is remembered in localStorage under this key.
`announcementLabel`	`string`	—	Overrides the localized accessible label for the announcement region.
`dismissLabel`	`string`	—	Overrides the localized accessible label for the dismiss button.

Every ng-blatui component also accepts a class input to merge extra Tailwind classes onto the host.