Summary
- Visibility. If an alert appears outside the user view (after performing an action), you should always show the alert by scrolling to its position automatically.
- Colors. Alerts can be displayed in all fruit colors, the status colors and a few more. The coloring is one of the most important properties of an alert and can be used even if it is only an alert "in the broadest sense".
Alert colors
You can change the color of the alert using modifiers. Besides the status colors (--success, --warning, --danger) all wescale fruit colors (--peach, --yangmei, ..., --cherry) are available. The status color of alerts is always a bit stronger than the other colors to emphasize their semantic meaning. The font color of those is also slightly stronger to maintain a good contrast ratio.
Since the color of links would not be visible on every background, this color is also controlled by the modifier. To make links recognizable as such, it is important to use the class .alert-link.
wui-bs-alert--success Yar lorem ipsum Lookout flogging bilge rat main sheet nipper fluke to go on account heave down clap of thunder. sails six pounders skysail code of conduct sloop black.
wui-bs-alert--danger Yar lorem ipsum Lookout flogging bilge rat main sheet nipper fluke to go on account heave down clap of thunder. sails six pounders skysail code of conduct sloop black.
wui-bs-alert--warning Yar lorem ipsum Lookout flogging bilge rat main sheet nipper fluke to go on account heave down clap of thunder. sails six pounders skysail code of conduct sloop black.
wui-bs-alert--highlight Yar lorem ipsum Lookout flogging bilge rat main sheet nipper fluke to go on account heave down clap of thunder. sails six pounders skysail code of conduct sloop black.
wui-bs-alert--plum Yar lorem ipsum Lookout flogging bilge rat main sheet nipper fluke to go on account heave down clap of thunder. sails six pounders skysail code of conduct sloop black.
wui-bs-alert--peach Yar lorem ipsum Lookout flogging bilge rat main sheet nipper fluke to go on account heave down clap of thunder. sails six pounders skysail code of conduct sloop black.
wui-bs-alert--gray Yar lorem ipsum Lookout flogging bilge rat main sheet nipper fluke to go on account heave down clap of thunder. sails six pounders skysail code of conduct sloop black.
<div class="wui-bs-alert wui-bs-alert--success">
<p class="m-b-0">
<strong>wui-bs-alert--success</strong> Yar lorem ipsum Lookout flogging bilge rat main sheet nipper fluke to go on account heave down
<a href="#" class="alert-link">clap of thunder</a>. sails six pounders skysail code of conduct sloop black.
</p>
</div>
<div class="wui-bs-alert wui-bs-alert--danger">
<p class="m-b-0">
<strong>wui-bs-alert--danger</strong> Yar lorem ipsum Lookout flogging bilge rat main sheet nipper fluke to go on account heave down
<a href="#" class="alert-link">clap of thunder</a>. sails six pounders skysail code of conduct sloop black.
</p>
</div>
<div class="wui-bs-alert wui-bs-alert--warning">
<p class="m-b-0">
<strong>wui-bs-alert--warning</strong> Yar lorem ipsum Lookout flogging bilge rat main sheet nipper fluke to go on account heave down
<a href="#" class="alert-link">clap of thunder</a>. sails six pounders skysail code of conduct sloop black.
</p>
</div>
<div class="wui-bs-alert wui-bs-alert--highlight">
<p class="m-b-0">
<strong>wui-bs-alert--highlight</strong> Yar lorem ipsum Lookout flogging bilge rat main sheet nipper fluke to go on account heave down
<a href="#" class="alert-link">clap of thunder</a>. sails six pounders skysail code of conduct sloop black.
</p>
</div>
<div class="wui-bs-alert wui-bs-alert--plum">
<p class="m-b-0">
<strong>wui-bs-alert--plum</strong> Yar lorem ipsum Lookout flogging bilge rat main sheet nipper fluke to go on account heave down
<a href="#" class="alert-link">clap of thunder</a>. sails six pounders skysail code of conduct sloop black.
</p>
</div>
<div class="wui-bs-alert wui-bs-alert--peach">
<p class="m-b-0">
<strong>wui-bs-alert--peach</strong> Yar lorem ipsum Lookout flogging bilge rat main sheet nipper fluke to go on account heave down
<a href="#" class="alert-link">clap of thunder</a>. sails six pounders skysail code of conduct sloop black.
</p>
</div>
<div class="wui-bs-alert wui-bs-alert--gray">
<p class="m-b-0">
<strong>wui-bs-alert--gray</strong> Yar lorem ipsum Lookout flogging bilge rat main sheet nipper fluke to go on account heave down
<a href="#" class="alert-link">clap of thunder</a>. sails six pounders skysail code of conduct sloop black.
</p>
</div>
Common combination
wui-bs-alert meets wui-icon-list
- Lorem Grog hogshead black jack yard. Spanker draft walk the plank Sea Legs. Lateen sail marooned nipper smartly. Booty black jack skysail snow. Piracy barque dead men tell no tales warp.
- Ipsum Keel yo-ho-ho booty swing the lead pirate clap of thunder American Main Sail ho. Hornswaggle bilge run a shot across the bow ho gally Admiral of the Black hands stern.
<div class="wui-bs-alert wui-bs-alert--yangmei">
<ul class="wui-fa-list m-b-0">
<li>
<span class="wui-fa-list__fa-bullet"><i class="fas fa-anchor"></i></span>
Lorem Grog hogshead black jack yard. Spanker draft walk
the plank Sea Legs. Lateen sail marooned nipper smartly.
Booty black jack skysail snow. Piracy barque dead men
tell no tales warp.
</li>
<li>
<span class="wui-fa-list__fa-bullet"><i class="fas fa-flag"></i></span>
Ipsum Keel yo-ho-ho booty swing the lead pirate clap of
thunder American Main Sail ho. Hornswaggle bilge run a
shot across the bow ho gally Admiral of the Black hands
stern.
</li>
</ul>
</div>
import WuiAlert from "@wui/wui-vue/lib/alert";
Properties
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | String | default | One of: default, info, success, warning, danger, highlight |
| message | String | Alert message (renders in default slot) |
Slots
| Name | Description |
|---|---|
| default | Alert content |
Notes
- All HTML attributes and event listeners are forwarded to the root element
