UI Lab | Banner

Banner

Full-width strip for surfacing alerts, notices, and messages.

import { Banner } from "ui-lab-components";
 
export function Example() {
  return (
    <Banner variant="note" size="md">
      This is an informational banner.
    </Banner>
  );
}

Variant

Size

Dismissible

Basic Banner

A neutral note banner using background shades instead of semantic colors. The default banner variant for general-purpose messaging.

import React from 'react';
import { Banner } from 'ui-lab-components';
 
export default function Example() {
  return (
    <Banner variant="note" size="md">
      This is a note banner. Use it for general-purpose messages and information without semantic intent.
    </Banner>
  );
}