Alert

The alert component can be used to provide information to your users such as success or error messages, but also highlighted information complementing the normal flow of paragraphs and headers on a page.

Examples

Variant

Alert can have fill, outline and light variant.

Code

<template>
  <div>
    <base-alert variant="fill">Fill</base-alert>
    <base-alert variant="outline">Outline</base-alert>
    <base-alert variant="light">Light</base-alert>
  </div>
</template>

Color

The alert component has various color.

Code

<template>
  <div>
    <base-alert color="primary">Primary</base-alert>
    <base-alert color="secondary">Secondary</base-alert>
    <base-alert color="info">Info</base-alert>
    <base-alert color="success">Success</base-alert>
    <base-alert color="warning">Warning</base-alert>
    <base-alert color="danger">Danger</base-alert>
  </div>
</template>

Title

The alert component can have a title

Code

<template>
  <base-alert color="danger" title="Alert">This is alert message</base-alert>
</template>

Dismissable

Alerts can be dismissable.

Code

<template>
  <base-alert is-dismissable variant="light" color="info"> This is alert message </base-alert>
  <base-alert is-dismissable variant="light" color="success"> This is alert message </base-alert>
  <base-alert is-dismissable variant="light" color="danger"> This is alert message </base-alert>
</template>

With Icon

Alerts can have an icon

Code

<template>
  <base-alert variant="light" color="info" icon="info" title="Important Info">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi ut velit atque mollitia,
    adipisci deserunt, eaque, itaque iste et illo corporis nulla quos nostrum ducimus excepturi
    eveniet possimus? Asperiores, pariatur.
  </base-alert>
</template>

Using Slot

Using slot to render custom style

Code

<template>
  <base-alert color="danger">
    <template #title>
      <div class="flex items-center gap-2">
        <base-icon icon="i-far-triangle-exclamation" class="text-2xl" />
        <span class="text-2xl font-extrabold">Alert</span>
      </div>
    </template>
    <template #default>This is alert message</template>
  </base-alert>
</template>

Alert API

Types

export type BaseAlertColorType = 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'danger'
export type BaseAlertIconType = 'info' | 'success' | 'warning' | 'danger'
export type BaseAlertVariantType = 'fill' | 'light' | 'outline'

Props

Name	Type	Default	Description
variant	BaseAlertVariantType	fill	Alert variant.
color	BaseAlertColorType	primary	Alert color.
title	string		Alert title.
icon	BaseAlertIconType		Alert icon.
isDismissable	boolean	false	Alert icon.

Slot

#default slot for rendering alert content

#title slot for rendering title content