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.

<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.

<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.

<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:

<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.

<i-alert dismissible v-model="visible">
    <p>Whoa! Nicely done.</p>
</i-alert>

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