Buzzy UI - Alerts

Alert Sizes

Size XXS

This is a XXS size alert

xxs

Size XS

This is a XS size alert

xs

Size SM

This is a SM size alert

sm

Size MD

This is a MD size alert

md

Size LG

This is a LG size alert

lg

Size XL

This is a XL size alert

xl

Size XXL

This is a XXL size alert

xxl

Variant: Default

Default Default

This is a default default alert

Primary Default

This is a primary default alert

Success Default

This is a success default alert

Warning Default

This is a warning default alert

Danger Default

This is a danger default alert

Info Default

This is a info default alert

Secondary Default

This is a secondary default alert

Muted Default

This is a muted default alert

Variant: Outlined

Default Outlined

This is a outlined default alert

Primary Outlined

This is a outlined primary alert

Success Outlined

This is a outlined success alert

Warning Outlined

This is a outlined warning alert

Danger Outlined

This is a outlined danger alert

Info Outlined

This is a outlined info alert

Secondary Outlined

This is a outlined secondary alert

Muted Outlined

This is a outlined muted alert

Variant: Filled

Default Filled

This is a filled default alert

Primary Filled

This is a filled primary alert

Success Filled

This is a filled success alert

Warning Filled

This is a filled warning alert

Danger Filled

This is a filled danger alert

Info Filled

This is a filled info alert

Secondary Filled

This is a filled secondary alert

Muted Filled

This is a filled muted alert

Variant: Solid

Default Solid

This is a solid default alert

Primary Solid

This is a solid primary alert

Success Solid

This is a solid success alert

Warning Solid

This is a solid warning alert

Danger Solid

This is a solid danger alert

Info Solid

This is a solid info alert

Secondary Solid

This is a solid secondary alert

Muted Solid

This is a solid muted alert

Variant: Accent

Default Accent

This is a accent default alert

Primary Accent

This is a accent primary alert

Success Accent

This is a accent success alert

Warning Accent

This is a accent warning alert

Danger Accent

This is a accent danger alert

Info Accent

This is a accent info alert

Secondary Accent

This is a accent secondary alert

Muted Accent

This is a accent muted alert

Size + Variant Combinations

SM Primary

This SM primary alert shows size + variant combination

SM Success

This SM success alert shows size + variant combination

SM Warning

This SM warning alert shows size + variant combination

MD Primary

This MD primary alert shows size + variant combination

MD Success

This MD success alert shows size + variant combination

MD Warning

This MD warning alert shows size + variant combination

LG Primary

This LG primary alert shows size + variant combination

LG Success

This LG success alert shows size + variant combination

LG Warning

This LG warning alert shows size + variant combination

Content Options

Message only, no icon

Message plus icon, no title (single line centers the icon)

Title plus single-line message

The icon stays pinned to the title line

Two media files could not be processed.

Replace or remove the failed files, then save the post again.

cover.jpg — Remote file returned 404.
intro.mp4 — Transcoding timed out.

Message via prop

Pass the body with the message prop instead of the default slot.

Icon Options

Oversized icon (xl) with a single-line message

Undersized icon (xs)

The icon follows the icon-size override, not the alert size

Filled icon

Material symbols render filled with icon-filled

Custom icon slot with a spinning icon

Dismissible

Dismissible alert

Click the close button to dismiss it

Sticky dismiss with persist key

This one remembers the dismissal in localStorage for 24 hours

Alignment

Left aligned (default)

Icon and text sit side by side

Center aligned

The icon stacks above centered text

Right aligned

Icon and text mirror to the end

Border, Rounded, Shadow

Borderless

The border is removed with border false

Sharp corners

Radius disabled with rounded none

Extra rounded

Larger radius with rounded xl

With shadow

Elevation added with shadow md

Actions

Configuration Mismatch Detected

The active cache store configured in your environment is 'redis', but the database settings specify 'database'.

This a Draft Post

This post on the trash