Getting Started

Installation Configuration

Components

Alert Badge Button Card Dialog Dropdown Icon Menu Table Tile Toggle Tooltip Typography

Alerts

Using Alerts

Alerts! Very important stuff! Why are we yelling? Use <ui:alert> to create an alert. They use the outline variant and the primary color values by default. They can be dismissed, and support all the colors and variants listed in the Colors and Variants sections.

Default Alert
Copied!
I'm a default alert.
1<ui:alert>I'm a default alert.</ui:alert>
1<ui:alert>I'm a default alert.</ui:alert>

Colors

Alerts support the following values for the color property: primary (default), secondary, success, warning, and danger.

Alert Colors
Copied!
I'm a primary alert.
I'm a secondary alert.
I'm an alert of success.
I'm a warning alert, you've been warned!
I'm a scary alert, danger is my middle name!
1<ui:alert color="primary">I'm a primary alert.</ui:alert>
2<ui:alert color="secondary">I'm a secondary alert.</ui:alert>
3<ui:alert color="success">I'm an alert of success.</ui:alert>
4<ui:alert color="warning">I'm a warning alert, you've been warned!</ui:alert>
5<ui:alert color="danger">I'm a scary alert, danger is my middle name!</ui:alert>
1<ui:alert color="primary">I'm a primary alert.</ui:alert>
2<ui:alert color="secondary">I'm a secondary alert.</ui:alert>
3<ui:alert color="success">I'm an alert of success.</ui:alert>
4<ui:alert color="warning">I'm a warning alert, you've been warned!</ui:alert>
5<ui:alert color="danger">I'm a scary alert, danger is my middle name!</ui:alert>

Variants

Alerts support the following values for the variant property: outline (default), solid, and glow.

Alert Colors
Copied!
I'm an outline variant. The default.
I'm a solid variant.
I'm a glow variant.
1<ui:alert variant="outline">I'm an outline variant. The default.</ui:alert>
2<ui:alert variant="solid">I'm a solid variant.</ui:alert>
3<ui:alert variant="glow">I'm a glow variant.</ui:alert>
1<ui:alert variant="outline">I'm an outline variant. The default.</ui:alert>
2<ui:alert variant="solid">I'm a solid variant.</ui:alert>
3<ui:alert variant="glow">I'm a glow variant.</ui:alert>

Icons

You can easily include an Icon in your alert by using the icon property.

1<ui:alert icon="exclamation-triangle">I'm an alert with an icon.</ui:alert>
1<ui:alert icon="exclamation-triangle">I'm an alert with an icon.</ui:alert>
Copied!
Alert Icons
Copied!
I'm a primary alert.
I'm a secondary alert.
I'm an alert of success.
I'm a warning alert, you've been warned!
I'm a scary alert, danger is my middle name!
1<ui:alert color="primary" icon="question-mark-circle">I'm a primary alert.</ui:alert>
2<ui:alert color="secondary" icon="information-circle">I'm a secondary alert.</ui:alert>
3<ui:alert color="success" icon="check-circle">I'm an alert of success.</ui:alert>
4<ui:alert color="warning" icon="exclamation-circle">I'm a warning alert, you've been warned!</ui:alert>
5<ui:alert color="danger" icon="exclamation-triangle">I'm a scary alert, danger is my middle name!</ui:alert>
1<ui:alert color="primary" icon="question-mark-circle">I'm a primary alert.</ui:alert>
2<ui:alert color="secondary" icon="information-circle">I'm a secondary alert.</ui:alert>
3<ui:alert color="success" icon="check-circle">I'm an alert of success.</ui:alert>
4<ui:alert color="warning" icon="exclamation-circle">I'm a warning alert, you've been warned!</ui:alert>
5<ui:alert color="danger" icon="exclamation-triangle">I'm a scary alert, danger is my middle name!</ui:alert>

Icon Alignment

You can control the vertical alignment of the icon using the icon-align property. Available values are: start (default), center, and end.

Icon Alignment
Copied!
Start Aligned Icon

This is the default alignment. The icon aligns with the start of the content.

Center Aligned Icon

The icon is vertically centered relative to the entire content block.

End Aligned Icon

The icon aligns with the end of the content block.

 1<ui:alert icon="information-circle" icon-align="start">
 2    <ui:heading tag="div">Start Aligned Icon</ui:heading>
 3    <ui:subheading>This is the default alignment. The icon aligns with the start of the content.</ui:subheading>
 4</ui:alert>
 5 
 6<ui:alert icon="information-circle" icon-align="center">
 7    <ui:heading tag="div">Center Aligned Icon</ui:heading>
 8    <ui:subheading>The icon is vertically centered relative to the entire content block.</ui:subheading>
 9</ui:alert>
10 
11<ui:alert icon="information-circle" icon-align="end">
12    <ui:heading tag="div">End Aligned Icon</ui:heading>
13    <ui:subheading>The icon aligns with the end of the content block.</ui:subheading>
14</ui:alert>
 1<ui:alert icon="information-circle" icon-align="start">
 2    <ui:heading tag="div">Start Aligned Icon</ui:heading>
 3    <ui:subheading>This is the default alignment. The icon aligns with the start of the content.</ui:subheading>
 4</ui:alert>
 5 
 6<ui:alert icon="information-circle" icon-align="center">
 7    <ui:heading tag="div">Center Aligned Icon</ui:heading>
 8    <ui:subheading>The icon is vertically centered relative to the entire content block.</ui:subheading>
 9</ui:alert>
10 
11<ui:alert icon="information-circle" icon-align="end">
12    <ui:heading tag="div">End Aligned Icon</ui:heading>
13    <ui:subheading>The icon aligns with the end of the content block.</ui:subheading>
14</ui:alert>

Icon Variants

The icon variant can be set using the iconVariant property.

1<ui:alert color="primary" icon="exclamation-triangle" icon-variant="solid">
2    I'm a primary alert with a solid icon.
3</ui:alert>
1<ui:alert color="primary" icon="exclamation-triangle" icon-variant="solid">
2    I'm a primary alert with a solid icon.
3</ui:alert>
Copied!

Dismissable

You may optionally include a close button on your alert by setting the dismiss property to true:

1<ui:alert :dismiss="true">Dismiss me, if you please</ui:alert>
1<ui:alert :dismiss="true">Dismiss me, if you please</ui:alert>
Copied!
Alert Colors
Copied!
Dismiss me, if you please
1<ui:alert color="primary" :dismiss="true" x-init="$watch('open', value => { setTimeout(() => { open = true }, 750) })">Dismiss me, if you please</ui:alert>
1<ui:alert color="primary" :dismiss="true" x-init="$watch('open', value => { setTimeout(() => { open = true }, 750) })">Dismiss me, if you please</ui:alert>

Using Alpine

If you need manual control over the alert dismissal, set the open property with Alpine.js. For example:

1<ui:alert :dismiss="true">Dismiss me, if you please</ui:alert>
1<ui:alert :dismiss="true">Dismiss me, if you please</ui:alert>
Copied!
Manual Control with Alpine.js
Copied!
Dismiss me, if you please
1<ui:alert
2    :dismiss="true"
3    x-init="$watch('open', value => { setTimeout(() => { open = true }, 750) })"
4>Dismiss me, if you please</ui:alert>
1<ui:alert
2    :dismiss="true"
3    x-init="$watch('open', value => { setTimeout(() => { open = true }, 750) })"
4>Dismiss me, if you please</ui:alert>
Like this project? Stop by the bear cave to stargaze.