Alert
Provide contextual feedback messages for typical user actions using the alert component.
Color Variants
Alerts are contextual feedback messages usable for any length of text, and can have an optional dismiss button. By default, alerts are set to have width: 100%
, fully spanning the width of the parent container. For choosing the context of the alert, use the color
property.
Size Variants
You’re able to use the size
modifier to control the text and spacing size of your alerts, using one of the available sizes: sm
, md
, and lg
.
Icon
It’s very common for alerts to have an associated icon to help the user understand the significance of the alert.
Content
Your alerts accept any kind of content, giving you the flexibility to create great looking contextual messages.
You can also add an icon to the <i-alert>
component by providing an icon
slot. The following example makes use of the bundled Inkline icons, but you can use any icon font that you like:
Dismissible
You can dismiss alerts using a combination of the provided dismissible
property and v-model
directive. The dismissible
property will be used to show the dismiss icon. The v-model
directive will show or hide the alert, resetting dismissed alerts when needed.
Whoa! Nicely done.
Configuration
Props
Use props to modify the component’s design and behavior.
- Property
size
Type'sm' | 'md' | 'lg'
Default'md'
Description The size variant of the alert - Property
color
Type'info' | 'success' | 'warning' | 'danger'
Default'info'
Description The color variant of the alert - Property
modelValue
TypeBoolean
Defaulttrue
Description Used to show or hide a dismissible alert - Property
dismissible
TypeBoolean
Defaultfalse
Description Shows a dismiss icon on the alert - Property
dismissAriaLabel
TypeString
DefaultDismiss
Description The aria-label to use for the dismiss button
Slots
Use slots to insert custom content into well-defined component locations.
- Property
default
Description Slot for default alert content - Property
icon
Description Slot for alert icon - Property
dismiss
Description Slot for alert dismiss button
Events
Use events to react to something happening inside the component.
- Property
update:modelValue
Description Event emitted for setting the modelValue
CSS Variables
Read more about configuring Inkline’s Design System variables to update the look and feel of the component.
- Property
----background
Valuecolor('info')
Description The background of the alert component - Property
----border-top-color
Valuecolor('info-60')
Description The border top color of the alert component - Property
----border-right-color
Valuecolor('info-60')
Description The border right color of the alert component - Property
----border-bottom-color
Valuecolor('info-60')
Description The border bottom color of the alert component - Property
----border-left-color
Valuecolor('info-60')
Description The border left color of the alert component - Property
----border-color
Valuevar(----border-top-color) var(----border-right-color) var(----border-bottom-color) var(----border-left-color)
Description The border color of the alert component - Property
----border-style
Valuevar(--border-style)
Description The border style of the alert component - Property
----border-top-width
Valuevar(--border-top-width)
Description The border top width of the alert component - Property
----border-right-width
Valuevar(--border-right-width)
Description The border right width of the alert component - Property
----border-bottom-width
Valuevar(--border-bottom-width)
Description The border bottom width of the alert component - Property
----border-left-width
Valuevar(--border-left-width)
Description The border left width of the alert component - Property
----border-width
Valuevar(----border-top-width) var(----border-right-width) var(----border-bottom-width) var(----border-left-width)
Description The border width of the alert component - Property
----border-top-left-radius
Valuevar(--border-top-left-radius)
Description The border top left radius of the alert component - Property
----border-top-right-radius
Valuevar(--border-top-right-radius)
Description The border top right radius of the alert component - Property
----border-bottom-right-radius
Valuevar(--border-bottom-right-radius)
Description The border bottom right radius of the alert component - Property
----border-bottom-left-radius
Valuevar(--border-bottom-left-radius)
Description The border bottom left radius of the alert component - Property
----border-radius
Valuevar(----border-top-left-radius) var(----border-top-right-radius) var(----border-bottom-right-radius) var(----border-bottom-left-radius)
Description The border radius of the alert component - Property
----box-shadow-offset-x
Valuevar(--box-shadow-offset-x)
Description The box shadow horizontal offset of the alert component - Property
----box-shadow-offset-y
Valuevar(--box-shadow-offset-y)
Description The box shadow vertical offset of the alert component - Property
----box-shadow-blur-radius
Valuevar(--box-shadow-blur-radius)
Description The box shadow blur radius of the alert component - Property
----box-shadow-spread-radius
Valuevar(--box-shadow-spread-radius)
Description The box shadow spread radius of the alert component - Property
----box-shadow-color
Valuevar(--box-shadow-color)
Description The box shadow spread radius of the alert component - Property
----box-shadow
Valuevar(----box-shadow-offset-x) var(----box-shadow-offset-y) var(----box-shadow-blur-radius) var(----box-shadow-spread-radius) var(----box-shadow-color)
Description The box shadow of the alert component - Property
----color
Valuecontrast-color($color-info)
Description The text color of the alert component - Property
----font-size
Valuefont-size()
Description The font size of the alert component - Property
----font-weight
Valuefont-weight('normal')
Description The font weight of the alert component - Property
----line-height
Valuevar(--line-height)
Description The line height of the alert component - Property
----padding-top
Valuevar(--padding-top)
Description The padding top of the alert component - Property
----padding-right
Valuevar(--padding-right)
Description The padding right of the alert component - Property
----padding-bottom
Valuevar(--padding-bottom)
Description The padding bottom of the alert component - Property
----padding-left
Valuevar(--padding-left)
Description The padding left of the alert component - Property
----padding
Valuevar(----padding-top) var(----padding-right) var(----padding-bottom) var(----padding-left)
Description The padding of the alert component - Property
----code--color
Valuevar(----color)
Description The code color of the alert component - Property
----code--background
Valuecolor('info-60')
Description The code background of the alert component - Property
----dismiss--margin
Valuevar(----padding-right)
Description The margin of the alert component dismiss icon - Property
----dismiss--padding
Valuecalc(var(----padding-top) / 2)
Description The padding of the alert component dismiss icon - Property
----link--color
Valuevar(----color)
Description The link color of the alert component