Implementation:TobikoData Sqlmesh Banner

Knowledge Sources	TobikoData_Sqlmesh
Domains	Web_UI, Design_System, User_Interface
Last Updated	2026-02-07 20:00 GMT

Overview

Banner is a flexible container component for displaying contextual information with variant-based styling, optional backgrounds, borders, and semantic sub-components.

Description

The Banner component provides a styled container system for presenting information, alerts, or status messages with semantic color variants (primary, success, warning, danger, info, neutral). It supports configurable sizing (small, medium, large), optional backgrounds that can be enabled by default or only on hover, and optional borders for emphasis. The component implements a compound component pattern with three sub-components: Banner.Label for bold headings, Banner.Description for explanatory text, and Banner.Divider for visual separation. The variant system automatically applies consistent color schemes for both light and dark themes, ensuring proper contrast and visual hierarchy across different notification types.

Usage

Use Banner to display contextual information, alerts, status messages, or informational blocks throughout the UI. Combine with sub-components (Label, Description, Divider) to create rich, semantic content layouts.

Code Reference

Source Location

Repository: TobikoData_Sqlmesh
File: web/client/src/library/components/banner/Banner.tsx

Signature

function Banner({
  variant = EnumVariant.Neutral,
  size = EnumSize.md,
  isFull = false,
  isCenter = false,
  hasBackground = true,
  hasBackgroundOnHover = false,
  hasBorder = false,
  children,
  className,
}: {
  children: React.ReactNode
  variant?: Variant
  isCenter?: boolean
  isFull?: boolean
  hasBackground?: boolean
  hasBackgroundOnHover?: boolean
  hasBorder?: boolean
  size?: Size
  hasSpinner?: boolean
  className?: string
}): JSX.Element

Banner.Label = Label
Banner.Description = Description
Banner.Divider = Divider

Import

import Banner from '@components/banner/Banner'

I/O Contract

Inputs

Name	Type	Required	Description
children	React.ReactNode	Yes	Content to display within banner
variant	Variant	No	Color variant (primary, success, warning, danger, info, neutral)
size	Size	No	Size variant (sm, md, lg)
isFull	boolean	No	Fill available height
isCenter	boolean	No	Center content alignment
hasBackground	boolean	No	Show background color
hasBackgroundOnHover	boolean	No	Show background only on hover
hasBorder	boolean	No	Show border
className	string	No	Additional CSS classes

Outputs

Name	Type	Description
JSX.Element	React component	Styled banner container with content

Usage Examples

import Banner from '@components/banner/Banner'
import { EnumVariant, EnumSize } from '~/types/enum'

function StatusDisplay() {
  return (
    <>
      <Banner variant={EnumVariant.Success} size={EnumSize.md}>
        <Banner.Label>Success</Banner.Label>
        <Banner.Description>
          Your changes have been saved successfully.
        </Banner.Description>
      </Banner>

      <Banner variant={EnumVariant.Warning} hasBorder>
        <Banner.Label>Warning</Banner.Label>
        <Banner.Divider />
        <Banner.Description>
          Some models are missing categorization.
        </Banner.Description>
      </Banner>
    </>
  )
}

Related Pages

Page Connections

Double-click a node to navigate. Hold to expand connections.

Principle

Implementation

Heuristic

Environment