Ermine UI

Banner

A strip across the top of the page for an announcement, with an optional action and a close button.

Source 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 banner
pnpm dlx ermineui add banner
yarn dlx ermineui add banner
bunx ermineui add banner

That copies 2 files into src/components/ui/banner/. Files you already have are kept.

Use

import { Banner } from '@/components/ui/banner'
<Tour v-model:open="touring" :steps="[
  { target: '#deploy-button', title: 'Deploy from here', description: 'Or just push to main.' },
  { target: '#search', title: 'Find anything', side: 'bottom' },
]" />

<Banner v-model:open="showBanner" variant="info" dismissible>
  Scheduled maintenance on Sunday.
  <template #action><a href="/status">Details</a></template>
</Banner>

<Timeline>
  <TimelineItem title="Promoted to production" time="12 min ago" tone="success">4f2c9a1 by Ines.</TimelineItem>
</Timeline>

<CodeBlock :code="snippet" filename="nuxt.config.ts" line-numbers />
<CopyButton value="dpl_12d5" label="Copy deployment id" />
Press <Kbd>⌘</Kbd> <Kbd>K</Kbd>

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
Banner.vuesrc/components/ui/banner/Banner.vue
index.tssrc/components/ui/banner/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.

Banner.vue 113 lines
<script setup lang="ts">
withDefaults(
  defineProps<{
    variant?: 'default' | 'info' | 'success' | 'warning' | 'destructive'
    /** Show a close button. */
    dismissible?: boolean
    dismissLabel?: string
    /** Accessible name of the strip. */
    label?: string
  }>(),
  { variant: 'default', dismissLabel: 'Dismiss', label: 'Announcement' },
)

/** Whether the banner is showing. Bind it to remember that it was dismissed. */
const open = defineModel<boolean>('open', { default: true })
</script>

<template>
  <div v-if="open" role="region" class="er-banner" :aria-label="label" :data-variant="variant">
    <div class="er-banner-text"><slot /></div>
    <div v-if="$slots.action" class="er-banner-action"><slot name="action" /></div>
    <button v-if="dismissible" type="button" class="er-banner-close" :aria-label="dismissLabel" @click="open = false">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><path d="M18 6 6 18M6 6l12 12" /></svg>
    </button>
  </div>
</template>

<style>
@layer components {
  .er-banner {
    --er-banner-color: var(--er-foreground);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem 1rem;
    width: 100%;
    padding: 0.625rem 1rem;
    border-bottom: 1px solid color-mix(in oklab, var(--er-banner-color) 25%, var(--er-border));
    background: color-mix(in oklab, var(--er-banner-color) 8%, var(--er-background));
    color: var(--er-foreground);
    font-size: 0.875rem;
  }

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

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

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

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

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

  .er-banner-text {
    min-width: 0;
    text-align: center;
    text-wrap: balance;
  }

  .er-banner-text a,
  .er-banner-action a {
    color: inherit;
    font-weight: var(--er-weight-medium);
    text-underline-offset: 3px;
  }

  .er-banner-action {
    flex-shrink: 0;
  }

  .er-banner-close {
    display: grid;
    flex-shrink: 0;
    place-items: center;
    width: 1.5rem;
    height: 1.5rem;
    margin-left: auto;
    padding: 0;
    border: 0;
    border-radius: var(--er-radius-sm);
    background: transparent;
    color: var(--er-muted-foreground);
    cursor: pointer;
  }

  .er-banner-close:hover {
    color: var(--er-foreground);
  }

  .er-banner-close:focus-visible {
    outline: 2px solid var(--er-ring);
    outline-offset: 2px;
  }

  .er-banner-close svg {
    width: 1rem;
    height: 1rem;
  }
}
</style>
index.ts 3 lines
/** Banner — a strip across the top of the page for an announcement, with an optional action and a close button. */
export { default as Banner } from './Banner.vue'