Components
Banner
A page-level notice, spoken across the full measure: a wash of the status pigment, one heavier hairline on the leading edge, and room for actions and a quiet close. Ink is the neutral register; the four semantic pigments are fixed.
#Basic usage
Scheduled maintenance
The reading room closes early this Friday, at four in the afternoon.
<script setup lang="ts">
import { Banner, Button } from "@bysages/vue";
</script>
<template>
<Banner.Root>
<Banner.Body>
<Banner.Title>Scheduled maintenance</Banner.Title>
<Banner.Description>
The reading room closes early this Friday, at four in the afternoon.
</Banner.Description>
<Banner.Actions>
<Button variant="outline" size="sm">View schedule</Button>
</Banner.Actions>
</Banner.Body>
<Banner.Close />
</Banner.Root>
</template>
#Props
#BannerRoot
| Prop | Type | Default | Description |
|---|---|---|---|
status | String as PropType<"ink" | "info" | "success" | "warning" | "danger"> | "ink" | — |
#BannerIcon
The status pigment's glyph.
A styled part — no props of its own; it takes the anatomy's shared styling.
#BannerBody
The column the title and description stack in.
A styled part — no props of its own; it takes the anatomy's shared styling.
#BannerTitle
The bold serif line — what the notice says at a glance.
A styled part — no props of its own; it takes the anatomy's shared styling.
#BannerDescription
The supporting line, in the quiet register.
A styled part — no props of its own; it takes the anatomy's shared styling.
#BannerActions
Where the reader answers — the row of buttons a banner may carry.
A styled part — no props of its own; it takes the anatomy's shared styling.
#BannerClose
The quiet close: a plain square-cut button; dismissal stays the consumer's state.
A styled part — no props of its own; it takes the anatomy's shared styling.