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 customize 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 customize 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.
Accessibility #
The component has a alert role. It's communicating an important message, and different from alertdialog role, it doesn't interrupt the user's workflow.
API #
Props #
| Name | Description | Types | Default |
|---|---|---|---|
| border | Stripe border for alert. |
|
|
| borderColor | Border color of the alert |
|
|
| center | Center the title and description of the alert |
|
|
| closeable | Add a close alert area |
|
|
| closeIcon | Replace the default close icon with a custom one |
|
|
| closeText | Use text instead of the close icon |
|
|
| color | Color of the component (theme string or |
|
|
| dense | Reduces alert paddings |
|
|
| description | The text content of the alert |
|
|
| icon | Show icon in front of alert content |
|
|
| modelValue | The value of the |
|
|
| outline | Removes background. |
|
|
| preset | Named preset combination of component props. |
| - |
| stateful | Add possibility to work with component without setting |
|
|
| textColor | Text color (theme string or HEX string). |
|
|
| title | The text content placed in the 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) |