Tessina UI
ConfiguratorGitHubIntroduction
InstallationUsageTheming
ComponentsAccordionAction SheetAlertAlertDialogArea ChartAspectRatioAvatarBadgeBannerBar ChartBottom NavBreadcrumbButtonButtonGroupCalendarCardCarouselChartChatBubbleCheckboxChipCodeBlockCollapsibleColor PickerComboboxCommandContainerContextMenuDate PickerDividerDrawerDropdown MenuEmptyStateFABFieldFieldsetFile UploadFile Upload 2FlexFormGridHoverCardIconButtonLabelLine ChartLinkMenubarMeterModalNavigation MenuNumberFieldOTP InputPaginationPie ChartPopoverProgressPromptInputRadar ChartRadial ChartRadioRatingScroll AreaSearchSegmentedControlSelectShortcutSidebarSkeletonSliderSpacerSpinnerSplit ButtonStackStatusStepperSurfaceSwitchTableTabsTextareaTime PickerToastToggleButtonToggleGroupToolbarTooltipTop Header DesktopTop Header Mobile
Contributing
Components

Banner

A promotional banner for curations, promotions, events, and programs — with an overline, headline, body, one or more call-to-actions, and a disclaimer. Color, full-bleed image, or inset-image backgrounds; three sizes; light and dark mode.

Playground

Installation

pnpm add @tessinaui/ui

Usage

import { Banner } from "@tessinaui/ui";
{/* Prop-driven */}
<Banner
  tone="primary"
  overline="Limited time"
  headline="Summer styles, up to 40% off"
  body="Refresh your wardrobe with thousands of deals."
  actions={[{ label: "Shop the sale", href: "/sale" }]}
  disclaimer="Offer ends Sunday. Selected items only."
/>

{/* Full-bleed image background with a legibility scrim */}
<Banner
  background="image"
  image="/promo.jpg"
  overline="Weekend event"
  headline="Two days of exclusive drops"
  actions={[{ label: "Set a reminder", href: "/event" }]}
/>

{/* Multi-destination (several CTAs) */}
<Banner
  headline="Find the perfect gift"
  actions={[
    { label: "Under $25", href: "/under-25" },
    { label: "Under $50", href: "/under-50" },
  ]}
/>

{/* Single-destination — the whole banner is one link */}
<Banner href="/collection" headline="Discover the new collection" />

Compose the parts directly when you need full control:

import {
  Banner, BannerOverline, BannerHeadline, BannerBody, BannerActions, BannerDisclaimer,
} from "@tessinaui/ui";

<Banner tone="primary">
  <BannerOverline>Limited time</BannerOverline>
  <BannerHeadline>Summer styles, up to 40% off</BannerHeadline>
  <BannerBody>Refresh your wardrobe with thousands of deals.</BannerBody>
  <BannerActions>{/* your own buttons/links */}</BannerActions>
  <BannerDisclaimer>Offer ends Sunday.</BannerDisclaimer>
</Banner>

Examples

Default

Overline, headline, body, a call-to-action, and a disclaimer on a colour background.

Backgrounds

A flat colour, a full-bleed image (with a legibility scrim), or an image inset beside the content.

Tones

Colour themes for color / inset backgrounds — neutral, primary, inverse, and accent.

Sizes

Three sizes scale the padding, headline, and body together.

Multi-destination

Pass several actions to point at multiple destinations.

Anatomy

<Banner>
  {/* badge?      — optional logo / badge slot        */}
  <BannerOverline />   {/* small eyebrow label        */}
  <BannerHeadline />   {/* the main title             */}
  <BannerBody />       {/* supporting copy            */}
  <BannerActions />    {/* one or more CTAs           */}
  <BannerDisclaimer /> {/* fine print                 */}
</Banner>

Props

Banner

PropTypeDefaultDescription
sizesm | md | lgmdScales padding and text
backgroundcolor | image | insetcolorBackground treatment
toneneutral | primary | inverse | accent | vividneutralColour theme for color / inset. vivid is a bold fixed gradient, identical in light and dark
roundednone | md | lg | xl | fulllgCorner radius
alignstart | centerstartContent alignment
overlineReactNode—Eyebrow label above the headline
headlineReactNode—Main title
bodyReactNode—Supporting copy
actionsBannerAction[] | ReactNode—CTA button(s), or custom controls
disclaimerReactNode—Fine print below the actions
badgeReactNode—Optional badge / logo above the overline
imagestring | ReactNode—Background image (image) or inset column (inset)
overlayauto | scrim | noneautoLegibility treatment over an image background
hrefstring—Make the whole banner one link (single-destination)
onDismiss() => void—Show a dismiss (✕) control

BannerAction: { label, href?, onClick?, variant?, intent?, size?, rounded?, leadingIcon?, trailingIcon? }. The first action renders prominent; the rest are secondary.

BannerOverline / BannerHeadline / BannerBody / BannerActions / BannerDisclaimer

Compound parts. Text parts read the parent's size from context so they scale automatically, and inherit the surface ink so they stay legible on colour and image backgrounds.

Accessibility

  • Actions render as real <button> / <a> controls (via the underlying Button)
  • On colour and image backgrounds the banner declares an on-colour Surface, so nested buttons automatically switch to high-contrast styling
  • Image backgrounds get a legibility scrim/gradient (overlay) so text stays readable
  • With href, a stretched link covers the banner and is labelled by the headline; explicit actions sit above it and stay independently clickable
  • The dismiss control has an accessible label (dismissLabel, default "Dismiss")

Badge

A small notification indicator that overlays other components. Two variants — Dot (plain circle) and Label (pill with text). Two appearances — Solid and Outline. Four sizes. Six colors. Five corner-rounding options.

Bar Chart

Token-driven bar chart built on Recharts v3 — vertical columns or horizontal bars, grouped or stacked, rounded corners, and full light/dark theming.

On this page

PlaygroundInstallationUsageExamplesDefaultBackgroundsTonesSizesMulti-destinationAnatomyPropsBannerBannerOverline / BannerHeadline / BannerBody / BannerActions / BannerDisclaimerAccessibility