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.

Heads up! This alert needs your attention, but it's not super important.

Well done! You successfully read this important alert message.

Warning! Better check yourself, you're not looking too good.

Oh snap! Change a few things up and try submitting again.

HTML

<i-alert color="info">
    <template #icon>
        <i-icon name="ink-info" />
    </template>
    <p>Heads up! This alert needs your attention, but it's not super important.</p>
</i-alert>

<i-alert color="success">
    <template #icon>
        <i-icon name="ink-check" />
    </template>
    <p>Well done! You successfully read this important alert message.</p>
</i-alert>

<i-alert color="warning">
    <template #icon>
        <i-icon name="ink-warning" />
    </template>
    <p>Warning! Better check yourself, you're not looking too good.</p>
</i-alert>

<i-alert color="danger">
    <template #icon>
        <i-icon name="ink-danger" />
    </template>
    <p>Oh snap! Change a few things up and try submitting again.</p>
</i-alert>

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.

Some quick example text to build on the alert title and make up the bulk of the alert's content.

HTML

<i-alert size="sm">
    Some quick example text to build on the alert title and make up the bulk of the alert's content.
</i-alert>

<i-alert size="md">
    Some quick example text to build on the alert title and make up the bulk of the alert's content.
</i-alert>

<i-alert size="lg">
    Some quick example text to build on the alert title and make up the bulk of the alert's content.
</i-alert>

Icon

It’s very common for alerts to have an associated icon to help the user understand the significance of the alert.

Some quick example text to build on the alert title and make up the bulk of the alert's content.

HTML

<i-alert color="info">
    <template #icon>
        <i-icon name="ink-info" />
    </template>
    <p>Some quick example text to build on the alert title and make up the bulk of the alert's content.</p>
</i-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:

Alert Title

Some quick example text to build on the alert and make up the bulk of the alert's content.

HTML

<i-alert>
    <template #icon>
        <i-icon name="ink-info" size="lg" />
    </template>
    <h4 class="_margin-bottom:0">Alert Title</h4>
    <p class="_margin-top:0">
        Some quick example text to build on the alert and make up the bulk of the alert's content.
    </p>
</i-alert>

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