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

<script setup lang="ts">
import { BaseAlert } from '@point-hub/papp'
</script>

<template>
  <div>
    <component :is="BaseAlert" variant="fill">Fill</component>
    <component :is="BaseAlert" variant="outline">Outline</component>
    <component :is="BaseAlert" variant="light">Light</component>
  </div>
</template>

Color

The alert component has various color.

Code

<script setup lang="ts">
import { BaseAlert } from '@point-hub/papp'
</script>

<template>
  <div>
    <component :is="BaseAlert" color="primary">Primary</component>
    <component :is="BaseAlert" color="secondary">Secondary</component>
    <component :is="BaseAlert" color="info">Info</component>
    <component :is="BaseAlert" color="success">Success</component>
    <component :is="BaseAlert" color="warning">Warning</component>
    <component :is="BaseAlert" color="danger">Danger</component>
  </div>
</template>

Title

The alert component can have a title

Code

<script setup lang="ts">
import { BaseAlert } from '@point-hub/papp'
</script>

<template>
  <component :is="BaseAlert" color="danger" title="Alert">This is alert message</component>
</template>

Dismissable

Alerts can be dismissable.

Code

<script setup lang="ts">
import { BaseAlert } from '@point-hub/papp'
</script>

<template>
  <component :is="BaseAlert" isDismissable variant="light" color="info">
    This is alert message
  </component>
  <component :is="BaseAlert" isDismissable variant="light" color="success">
    This is alert message
  </component>
  <component :is="BaseAlert" isDismissable variant="light" color="danger">
    This is alert message
  </component>
</template>

With Icon

Alerts can have an icon

Code

<template>
  <component :is="BaseAlert" 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.
  </component>
</template>

Using Slot

Using slot to render custom style

Code

<script setup lang="ts">
import { BaseAlert } from '@point-hub/papp'
</script>

<template>
  <component :is="BaseAlert" 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>
  </component>
</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