Ermine UI

Alert

An inline message that stays on the page, in five variants, with an optional icon.

See it liveSource on GitHub

Install

If this is the first component in the project, set up once. This writes ermine.json and copies the theme stylesheet. The installation guide covers Vue, Nuxt and Astro.

npx ermineui init
pnpm dlx ermineui init
yarn dlx ermineui init
bunx ermineui init

Then add the component:

npx ermineui add alert
pnpm dlx ermineui add alert
yarn dlx ermineui add alert
bunx ermineui add alert

That copies 4 files into src/components/ui/alert/. Files you already have are kept.

Use

import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
<Alert variant="destructive">
  <svg>…</svg>  <!-- optional: an svg placed first becomes the icon -->
  <AlertTitle>Build failed</AlertTitle>
  <AlertDescription>Type error in cart/total.ts on line 42.</AlertDescription>
</Alert>

<Avatar src="/people/ines.jpg" alt="Ines Kovač">IK</Avatar>

<Progress :value="35" aria-label="Upload" />  <!-- leave value out when the amount is unknown -->
<Spinner />
<Button :loading="saving" @click="save">Save</Button>  <!-- a spinner, and no second press, while saving is true -->

In Nuxt, with the auto-import setting, the tags work in templates without the import. In Astro, use it inside a Vue island.

What gets copied

FileWhere it goes
Alert.vuesrc/components/ui/alert/Alert.vue
AlertDescription.vuesrc/components/ui/alert/AlertDescription.vue
AlertTitle.vuesrc/components/ui/alert/AlertTitle.vue
index.tssrc/components/ui/alert/index.ts

The folders are the suggested ones. ermine.json says where yours are.

Source

This is exactly what the command copies. To install by hand, create each file below and the helpers listed above.

Alert.vue 78 lines
<script setup lang="ts">
withDefaults(
  defineProps<{
    variant?: 'default' | 'info' | 'success' | 'warning' | 'destructive'
  }>(),
  { variant: 'default' },
)
</script>

<template>
  <div role="alert" class="er-alert" :data-variant="variant">
    <slot />
  </div>
</template>

<style>
@layer components {
  .er-alert {
    --er-alert-color: var(--er-foreground);
    display: grid;
    gap: 0.25rem 0.75rem;
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid color-mix(in oklab, var(--er-alert-color) 30%, var(--er-border));
    border-radius: var(--er-radius-lg);
    background: color-mix(in oklab, var(--er-alert-color) 5%, var(--er-card));
    color: var(--er-card-foreground);
    font-size: 0.875rem;
  }

  .er-alert[data-variant='default'] {
    border-color: var(--er-border);
    background: var(--er-card);
  }

  .er-alert[data-variant='info'] {
    --er-alert-color: var(--er-info);
  }

  .er-alert[data-variant='success'] {
    --er-alert-color: var(--er-success);
  }

  .er-alert[data-variant='warning'] {
    --er-alert-color: var(--er-warning);
  }

  .er-alert[data-variant='destructive'] {
    --er-alert-color: var(--er-destructive);
  }

  /* An svg placed first becomes the icon, in a column of its own beside the text. */
  .er-alert:has(> svg) {
    grid-template-columns: auto 1fr;
  }

  .er-alert > svg {
    grid-row: 1 / span 2;
    width: 1rem;
    height: 1rem;
    margin-top: 0.125rem;
    color: var(--er-alert-color);
  }

  .er-alert-title {
    grid-column: -2;
    font-weight: var(--er-weight-medium);
    line-height: 1.25rem;
  }

  .er-alert-description {
    grid-column: -2;
    color: var(--er-muted-foreground);
    line-height: 1.5;
  }
}
</style>
AlertDescription.vue 4 lines
<template>
  <div class="er-alert-description"><slot /></div>
</template>
AlertTitle.vue 4 lines
<template>
  <div class="er-alert-title"><slot /></div>
</template>
index.ts 5 lines
/** Alert — an inline message that stays on the page, in five variants, with an optional icon. */
export { default as Alert } from './Alert.vue'
export { default as AlertDescription } from './AlertDescription.vue'
export { default as AlertTitle } from './AlertTitle.vue'