Vue Interface

Appearance

Alert ​

The Alert component provides a flexible and customizable alert system with built-in icons, customizable color variants, and sizes.

Installation ​

bash
pnpm i @vue-interface/alert
bash
yarn add @vue-interface/alert
bash
npm i @vue-interface/alert
bash
bun i @vue-interface/alert

Tailwind Setup ​

css
@import '@vue-interface/alert/index.css';

Basic Usage ​

The component renders with a default information icon.

Some Content
Some Content
Lorem ipsum dolor sit amet consectetur adipiscing elit. Consectetur adipiscing elit quisque faucibus ex sapien vitae. Ex sapien vitae pellentesque sem placerat in id. Placerat in id cursus mi pretium tellus duis. Pretium tellus duis convallis tempus leo eu aeneanLorem ipsum dolor sit amet consectetur adipiscing elit.
Do you want to continue?
vue
<Alert>Some Content</Alert>
<Alert class="alert-centered">Some Content</Alert>
<Alert>Lorem ipsum dolor sit amet consectetur adipiscing elit. Consectetur adipiscing elit quisque faucibus
    ex sapien vitae. Ex sapien vitae pellentesque sem placerat in id. Placerat in id cursus mi pretium
    tellus duis. Pretium tellus duis convallis tempus leo eu aeneanLorem ipsum dolor sit amet consectetur
    adipiscing elit.
</Alert>
<Alert class="inline-flex">
    Do you want to continue?
    <template #action>
        <button class="btn btn-secondary">No</button>
        <button class="btn btn-blue-900">Yes</button>
    </template>
</Alert>

Use the alert-outline class to create an outlined alert.

Basic Usage
vue
<Alert class="alert-outline">Basic Usage</Alert>

Custom Icons ​

The default alert uses the information-circle-icon from heroicon. To use a custom icon, import it, and use it inside the template #icon wrapper.

vue
import {ExclamationTriangleIcon, ExclamationCircleIcon, InformationCircleIcon, CheckCircleIcon, CircleStackIcon} from '@heroicons/vue/24/outline';
Some Content
Some Content
Some Content
Some Content
Some Content
Show Code
vue
<Alert>
    <template #icon>
        <InformationCircleIcon/>
    </template>
    Some Content
</Alert>
<Alert class="alert-danger">
    <template #icon>
        <ExclamationCircleIcon/>
    </template>
    Some Content
</Alert>
<Alert class="alert-success">
    <template #icon>
        <CheckCircleIcon/>
    </template>
    Some Content
</Alert>
<Alert class="alert-warning">
    <template #icon>
        <ExclamationTriangleIcon/>
    </template>
    Some Content
</Alert>
<Alert>
    <template #icon>
        <CircleStackIcon/>
    </template>
    Some Content
</Alert>

Sizes ​

Customize the size of an alert using a predetermined size, tailwind's numeric sizing classes, or an arbitrary CSS length unit.

Predetermined Sizes ​

The size can be customized using predetermined size prop values: xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl. Use the syntax: size="[size]".

xs
sm
md
lg
xl
2xl
3xl
4xl
5xl
Show Code
vue
<Alert size="alert-xs">xs</Alert>
<Alert size="alert-sm">sm</Alert>
<Alert size="alert-md">md</Alert>
<Alert size="alert-lg">lg</Alert>
<Alert size="alert-xl">xl</Alert>
<Alert size="alert-2xl">2xl</Alert>
<Alert size="alert-3xl">3xl</Alert>
<Alert size="alert-4xl">4xl</Alert>
<Alert size="alert-5xl">5xl</Alert>

Tailwind Sizes ​

For more granular control over sizes, use Tailwind's numeric sizing scale classes: alert-1 - alert-96.

alert-3
alert-3.5
alert-4
alert-5
Show Code
vue
<Alert size="alert-3">alert-3</Alert>
<Alert size="alert-3.5">alert-3.5</Alert>
<Alert size="alert-4">alert-4</Alert>
<Alert size="alert-5">alert-5</Alert>

Arbitrary Sizes ​

For precise sizing, specify exact pixel values using the syntax alert-[Npx] or any other CSS length units (rem, em, mm, etc.).

alert-[16px]
alert-[1.5rem]
Show Code
vue
<Alert size="alert-[16px]">alert-[16px]</Alert>
<Alert size="alert-[1.5rem]">alert-[1.5rem]</Alert>

Color Variants ​

The alert component supports eight standard color variants: primary, secondary, success, danger, warning, info, light, dark. Use the syntax: alert-[variant].

Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
Show Code
vue
<Alert class="alert-primary">Primary</Alert>
<Alert class="alert-secondary">Secondary</Alert>
<Alert class="alert-success">Success</Alert>
<Alert class="alert-danger">Danger</Alert>
<Alert class="alert-warning">Warning</Alert>
<Alert class="alert-info">Info</Alert>
<Alert class="alert-light">Light</Alert>
<Alert class="alert-dark">Dark</Alert>

Color Shades ​

You can also use Tailwind color shades by passing them as classes.

alert-red-50
alert-red-100
alert-red-200
alert-red-300
alert-red-400
alert-red-500
alert-red-600
alert-red-700
alert-red-800
alert-red-900
alert-red-950
Show Code
vue
<Alert class="alert-red-50">alert-red-50</Alert>
<Alert class="alert-red-100">alert-red-100</Alert>
<Alert class="alert-red-200">alert-red-200</Alert>
<Alert class="alert-red-300">alert-red-300 </Alert>
<Alert class="alert-red-400">alert-red-400</Alert>
<Alert class="alert-red-500">alert-red-500</Alert>
<Alert class="alert-red-600">alert-red-600</Alert>
<Alert class="alert-red-700">alert-red-700 </Alert>
<Alert class="alert-red-800">alert-red-800 </Alert>
<Alert class="alert-red-900">alert-red-900 </Alert>
<Alert class="alert-red-950">alert-red-950</Alert>

Outline Sizes ​

Customize the size of a alert-outline using a predetermined size, tailwind's numeric sizing classes, or an arbitrary CSS length unit.

Predetermined Sizes (Outline) ​

The size can be customized using a predetermined size prop: xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl. Use the syntax: alert-[size].

xs
sm
md
lg
xl
2xl
3xl
4xl
5xl
Show Code
vue
<Alert class="alert-outline" size="alert-xs" closeable>xs</Alert>
<Alert class="alert-outline" size="alert-sm" closeable>sm</Alert>
<Alert class="alert-outline" size="alert-md" closeable>md</Alert>
<Alert class="alert-outline" size="alert-lg" closeable>lg</Alert>
<Alert class="alert-outline" size="alert-xl" closeable>xl</Alert>
<Alert class="alert-outline" size="alert-2xl" closeable>2xl</Alert>
<Alert class="alert-outline" size="alert-3xl" closeable>3xl</Alert>
<Alert class="alert-outline" size="alert-4xl" closeable>4xl</Alert>
<Alert class="alert-outline" size="alert-5xl" closeable>5xl</Alert>

Tailwind Sizes (Outline) ​

For more granular control over alert-outline sizes, use Tailwind's numeric sizing scale classes: alert-1 - alert-96.

alert-3
alert-3.5
alert-4
alert-5
Show Code
vue
<Alert class="alert-outline" size="alert-3" closeable>alert-3</Alert>
<Alert class="alert-outline" size="alert-3.5" closeable>alert-3.5</Alert>
<Alert class="alert-outline" size="alert-4" closeable>alert-4</Alert>
<Alert class="alert-outline" size="alert-5" closeable>alert-5</Alert>

Arbitrary sizes (Outline) ​

For precise sizing, specify exact pixel values using the syntax alert-[Npx] or any other CSS length units (rem, em, mm, etc.).

[16px]
[1.5rem]
Show Code
vue
<Alert class="alert-outline" size="alert-[16px]" closeable>[16px]</Alert>
<Alert class="alert-outline" size="alert-[1.5rem]" closeable>[1.5rem]</Alert>

Outline Color Variants ​

Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
Show Code
vue
<Alert class="alert-outline-primary" closeable>Primary</Alert>
<Alert class="alert-outline-secondary" closeable>Secondary</Alert>
<Alert class="alert-outline-success" closeable>Success</Alert>
<Alert class="alert-outline-danger" closeable>Danger</Alert>
<Alert class="alert-outline-warning" closeable>Warning</Alert>
<Alert class="alert-outline-info" closeable>Info</Alert>
<Alert class="alert-outline-light" closeable>Light</Alert>
<Alert class="alert-outline-dark" closeable>Dark</Alert>

Outline Color Shades ​

alert-red-50
alert-red-100
alert-red-200
alert-red-300
alert-red-400
alert-red-500
alert-red-600
alert-red-700
alert-red-800
alert-red-900
alert-red-950
Show Code
vue
<Alert class="alert-outline-red-50" closeable>alert-red-50</Alert>
<Alert class="alert-outline-red-100" closeable>alert-red-100</Alert>
<Alert class="alert-outline-red-200" closeable>alert-red-200</Alert>
<Alert class="alert-outline-red-300" closeable>alert-red-300</Alert>
<Alert class="alert-outline-red-400" closeable>alert-red-400</Alert>
<Alert class="alert-outline-red-500" closeable>alert-red-500</Alert>
<Alert class="alert-outline-red-600" closeable>alert-red-600</Alert>
<Alert class="alert-outline-red-700" closeable>alert-red-700</Alert>
<Alert class="alert-outline-red-800" closeable>alert-red-800</Alert>
<Alert class="alert-outline-red-900" closeable>alert-red-900</Alert>
<Alert class="alert-outline-red-950" closeable>alert-red-950</Alert>