Alert
Alerts communicate to users important updates or information. This information can be platform wide or flow specific. There are two distinct styles to cover both use cases.
Two variants: Filled (Banner) & Outline (Inline)
Use Filled for platform wide alerts
Use Outline for flow or modal specific alerts
They can contain a link if necessary
They can be permanent or dismissible
We have 4 types of alerts or severity:
Info (blue), Success (green), Warning (orange) and Error (red).
Banner will always span the width of the page just underneath the AppTopBar. Inline will span the width of the area it is placed in.
While styled very similarly, alerts are different from toasts.
Basic usage
The Alert offers four severity levels that set a distinctive icon and color.
Error alert
Warning alert
Info alert
Success alert
<Alert severity="error" permanent>Error alert</Alert>
<Alert severity="warning" permanent>Warning alert</Alert>
<Alert severity="info" permanent>Info alert</Alert>
<Alert severity="success" permanent>Success alert</Alert>Playground
Text goes here
Anatomy
- Radius
- Severity Icon Slot
- Severity Fill (500 or 100 value)
- Default Slot Content (center aligned by default)
- Link Slot Content
- Permanent Icon Slot (close)
Variants
Alerts are outlined by default, but a filled value can be informed to the variant property
Error alert
Warning alert
Info alert
Success alert
<Alert severity="error" permanent variant="filled">Error alert</Alert>
<Alert severity="warning" permanent variant="filled">Warning alert</Alert>
<Alert severity="info" permanent variant="filled">Info alert</Alert>
<Alert severity="success" permanent variant="filled">Success alert</Alert>Closable alerts
Alerts are closable by default, but you can control this via the permanent property.
Error alert
<Alert severity="error" :permanent="false">Error alert</Alert>Roundness
Roundness of alerts can be customized via radius property.
Info alert
Success alert
<Alert severity="info" permanent radius="standard">Info alert</Alert>
<Alert severity="success" permanent radius="none">Success alert</Alert>Add a Link
You can include links in the alert message by using the link slot. The slot is optional.
Success alert
Success alert
Info alert
Info alert
Warning alert
Warning alert
Error alert
Error alert
<Alert severity="success">
Success alert
<template #link><a>Learn more</a></template>
</Alert>
<Alert severity="success" variant="filled">
Success alert
<template #link><a>Learn more</a></template>
</Alert>
<Alert severity="info">
Info alert
<template #link><a>Learn more</a></template>
</Alert>
<Alert severity="info" variant="filled">
Info alert
<template #link><a>Learn more</a></template>
</Alert>
<Alert severity="warning">
Warning alert
<template #link><a>Learn more</a></template>
</Alert>
<Alert severity="warning" variant="filled">
Warning alert
<template #link><a>Learn more</a></template>
</Alert>
<Alert severity="error">
Error alert
<template #link><a>Learn more</a></template>
</Alert>
<Alert severity="error" variant="filled">
Error alert
<template #link><a>Learn more</a></template>
</Alert>API
See the documentation below for a complete reference to all the props and classes available to the components mentioned here.