Alert #
Displays a short, important message to attract user attention. If you need to send a notification to users, you can use our Toast component.
When To Use #
- When you need to show an important message to users.
- When you need a static container with some important information which is closable by user actions.
Examples #
Default #
The basic usage of the va-alert component.
Different styles #
3 styles are available: color, outlined and border styled alerts.
Color #
Use color property to change the color of the component and text-color to change the textual content color.
Border #
Use the border property to add a strip and the border-color property to change the color of the strip.
Dense #
The dense property reduces paddings on alert.
Title #
The title property allows you to write text over the description area. Use the title slot to costomize the title area.
You can use slotted title
Icon #
The icon property allows you to add an icon in front of the description area. Use the icon slot to costomize the icon area.
Closeable #
The closeable property add a close alert area. Also you can pass close-text prop to make close icon as plain text.
Center #
The center property allows you to center title and description areas.
API #
Props #
| Name | Description | Types | Default |
|---|---|---|---|
| border |
|
| |
| borderColor |
|
| |
| center |
|
| |
| closeable |
|
| |
| closeText |
|
| |
| color |
|
| |
| dense |
|
| |
| description |
|
| |
| icon |
|
| |
| modelValue |
|
| |
| outline |
|
| |
| preset |
| - | |
| stateful |
|
| |
| textColor |
|
| |
| title |
|
|
Events #
| Name | Description |
|---|---|
update:modelValue | The event is triggered when the component needs to change the model. Is also used by |
Slots #
| Name | Description |
|---|---|
close | Alert close area content |
default | Content of alert body |
icon | Alert icon area content |
title | Alert title area content |
Methods #
| Name | Description |
|---|---|
hide | Hides alert (on stateless alert only emits |
Css Variables #
| Name | Default Value |
|---|---|
| --va-alert-position | relative |
| --va-alert-display | flex |
| --va-alert-align-items | center |
| --va-alert-margin-y | 0.25rem |
| --va-alert-padding-x | 0.75rem |
| --va-alert-padding-y | 0.75rem |
| --va-alert-padding-y-dense | 0.25rem |
| --va-alert-border-width | 0 |
| --va-alert-border-radius | 4px |
| --va-alert-box-shadow | var(--va-box-shadow) |
| --va-alert-color | transparent |
| --va-alert-title-font-weight | 600 |
| --va-alert-top-border-radius | 4px 4px 0 0 |
| --va-alert-right-border-radius | 0 4px 4px 0 |
| --va-alert-bottom-border-radius | 0 0 4px 4px |
| --va-alert-left-border-radius | 4px 0 0 4px |
| --va-badge-margin-right | 0.5rem |
| --va-badge-padding-x | 0.5rem |
| --va-badge-padding-y | 0.125rem |
| --va-badge-border-radius | 0.5rem |
| --va-badge-font-size | 0.625rem |
| --va-badge-letter-spacing | 0.0625rem |
| --va-alert-close-padding-x | 0.5rem |
| --va-alert-close-padding-y | 0.0625rem |
| --va-alert-close-font-size | 1rem |
| --va-alert-stripe-border-size | var(--va-stripe-border-size) |