sigilUI

Banner

Display a full-width message within the page layout.

@sigil-ui/componentsReact

Preview

Live preview Interactive

Import

import { Banner } from "@sigil-ui/components";

Usage

<Banner>
    Banner content
  </Banner>

Props

PropTypeDefaultDescription
variantBannerVariant—Selects a supported visual treatment.
iconReactNode—Icon configuration.
dismissibleboolean—Dismissible configuration.
onDismiss() => void—On Dismiss configuration.

Token integration

CSS VariablePurpose
--s-surfaceSurface
--s-borderBorder
--s-textText
--s-info-mutedInfo muted
--s-infoInfo
--s-warning-mutedWarning muted
--s-warningWarning
--s-error-mutedError muted
--s-errorError
--s-success-mutedSuccess muted
--s-successSuccess
--s-banner-icon-gapBanner icon gap