Banner
Banner renders a compact announcement strip.
Installation
Import from @gaudi/design-system. Load @gaudi/design-system/global.css once and add transpilePackages: ['@gaudi/design-system'] in Next.js.
Copy an example into your project with the shadcn CLI: npx shadcn@latest add https://design.gaudi.site/r/alert-dismissible.json.
Usage
Playground
Examples
Alert: Dismissible notices
Alert: Message notification
Alert: Actions and rich content
Alert: Service status summary
Alert: Variants
API
9 props
Accessibility
Static banners use status semantics. Linked banners derive their accessible name from the rendered title and body, including rich content; ariaLabel provides an explicit override.
Related
CardCard frames reusable content with title, subtitle, and optional children.8 examplesAvatarProfile images, resilient initials, presence, verification, account menus and collaborator groups. The existing Avatar API and curated patterns share the same image and fallback primitives.10 examplesEmptyStateExplain empty collections, unavailable results and the next useful action.4 examplesSkeletonSkeleton renders non-semantic loading placeholders on the theme border token, so blocks read clearly in light and dark themes. Shimmer is the text counterpart: a highlight that sweeps across a label such as Thinking… while work is in progress.6 examples