Skip to content
BigBang

Popular

    ↑↓Navigate↵OpenEscClose
    TR

    Components

    Banner

    A full-width message at the top of the app or page about something that affects everything below.

    Storybook
    Storybook
    Source
    Source

    The example below loads live from Storybook; open it in Storybook to use the controls.

    Live example, StorybookOpen in Storybook

    Default

    Section titled “Default”

    A one-sentence message and an optional single link. The banner uses the bold status colours.

    Uyarı: Maintenance is planned tonight from 23.00 to 01.00.Details
    import { Banner, Link } from '@bigbang/ui';
    

    export default function Default() {
      return (
        <Banner tone="warning" action={<Link href="#details">Details</Link>}>
          Maintenance is planned tonight from 23.00 to 01.00.
        </Banner>
      );
    }

    Tones

    Section titled “Tones”

    info for announcements, warning for something that affects work, danger for an outage.

    Bilgi: New features have been added.
    Başarılı: The service is working again.
    Uyarı: Maintenance is planned tonight from 23.00 to 01.00.
    Hata: The service is unavailable right now.
    import { Banner } from '@bigbang/ui';
    

    export default function Tones() {
      return (
        <div className="flex flex-col gap-md">
          <Banner tone="info">New features have been added.</Banner>
          <Banner tone="success">The service is working again.</Banner>
          <Banner tone="warning">Maintenance is planned tonight from 23.00 to 01.00.</Banner>
          <Banner tone="danger">The service is unavailable right now.</Banner>
        </div>
      );
    }

    Dismissible

    Section titled “Dismissible”

    On dismiss the banner fades and is removed. Store the dismissal so it does not come back.

    Bilgi: New features have been added.
    import { Banner } from '@bigbang/ui';
    

    export default function Dismissible() {
      return (
        <Banner tone="info" dismissible>
          New features have been added.
        </Banner>
      );
    }

    Light and dark mode

    Section titled “Light and dark mode”

    The background comes from color-status-*-emphasis and the text from color-status-*-on-emphasis.

    Bilgi: New features have been added.
    Başarılı: The service is working again.
    Uyarı: Maintenance is planned tonight from 23.00 to 01.00.
    Hata: The service is unavailable right now.
    Bilgi: New features have been added.
    Başarılı: The service is working again.
    Uyarı: Maintenance is planned tonight from 23.00 to 01.00.
    Hata: The service is unavailable right now.
    import { Banner } from '@bigbang/ui';
    

    export default function Tones() {
      return (
        <div className="flex flex-col gap-md">
          <Banner tone="info">New features have been added.</Banner>
          <Banner tone="success">The service is working again.</Banner>
          <Banner tone="warning">Maintenance is planned tonight from 23.00 to 01.00.</Banner>
          <Banner tone="danger">The service is unavailable right now.</Banner>
        </div>
      );
    }