monday-ui-react-core/src/components/AlertBanner/__stories__/AlertBanner.mdx

Official monday.com UI resources for application development in React.js

import { Canvas, Meta } from "@storybook/blocks";
import { ComponentRules, Link, UsageGuidelines } from "vibe-storybook-components";
import AlertBanner from "../AlertBanner";
import AlertBannerText from "../AlertBannerText/AlertBannerText";
import AlertBannerLink from "../AlertBannerLink/AlertBannerLink";
import AlertBannerButton from "../AlertBannerButton/AlertBannerButton";
import {
  ATTENTION_BOX,
  TOAST,
  TOOLTIP
} from "../../../storybook/components/related-components/component-description-map";
import { TipWhenToUse } from "./AlertBanner.stories.helpers";
import * as AlertBannerStories from "./AlertBanner.stories";

<Meta of={AlertBannerStories} />

# Alert Banner

- [Overview](#overview)
- [Props](#props)
- [Usage](#usage)
- [Variants](#variants)
- [Do’s and don’ts](#dos-and-donts)
- [Use cases and examples](#use-cases-and-examples)
- [Related components](#related-components)
- [Feedback](#feedback)

## Overview

Alert banners show pressing and high-signal messages, such as system alerts. They are meant to be noticed and prompt users to take action.

<Canvas of={AlertBannerStories.Overview} />

## Props

<PropsTable />

## Usage

<UsageGuidelines
  guidelines={[
    "Alert banners should have call for action and an option to dismiss.",
    "Don't include more than one call to action in an alert banner.",
    "Place the banner on the top of the screen, and push all other content below it."
  ]}
/>

<TipWhenToUse />

## Variants

### Types

There are five types of alert banners: primary, positive, negative, warning and inverted.

<Canvas of={AlertBannerStories.Types} />

### Alert Banner with button

<Canvas of={AlertBannerStories.AlertBannerWithButton} />

### Alert Banner with link

<Canvas of={AlertBannerStories.AlertBannerWithLink} />

## Do’s and Don’ts

<ComponentRules
  rules={[
    {
      positive: {
        component: (
          <AlertBanner className="monday-storybook-alert-banner_medium-container">
            <AlertBannerText text="Join us at Elevate!" />
            <AlertBannerLink text="RSVP now" href="https://monday.com" />
          </AlertBanner>
        ),
        description: "Use banners for system messages, background processes, and general updates."
      },
      negative: {
        component: (
          <AlertBanner className="monday-storybook-alert-banner_medium-container">
            <AlertBannerText text="We successfully archived 1 item" />
          </AlertBanner>
        ),
        description: (
          <>
            Don’t use banners for notifying a user of an action they have taken. Instead, provide visual feedback with a{" "}
            <StorybookLink page="Feedback/Toast">Toast.</StorybookLink>
          </>
        )
      }
    },
    {
      positive: {
        component: (
          <AlertBanner
            className="monday-storybook-alert-banner_medium-container"
            backgroundColor={AlertBanner.backgroundColors.NEGATIVE}
          >
            <AlertBannerText text="No connection" />
            <AlertBannerLink text="Learn more" href="https://monday.com" />
            <AlertBannerButton>Try again</AlertBannerButton>
          </AlertBanner>
        ),
        description: "If two actions are needed, use two different call to acitons."
      },
      negative: {
        component: (
          <div className="monday-storybook-alert-banner_column-wrapper">
            <AlertBanner
              backgroundColor={AlertBanner.backgroundColors.NEGATIVE}
              className="monday-storybook-alert-banner_medium-container"
            >
              <AlertBannerText text="No connection" />
              <AlertBannerLink text="Learn more" href="https://monday.com" />
              <AlertBannerLink text="Try again" href="https://monday.com" />
            </AlertBanner>
            <AlertBanner
              backgroundColor={AlertBanner.backgroundColors.NEGATIVE}
              className="monday-storybook-alert-banner_medium-container"
            >
              <AlertBannerText text="No connection" />
              <AlertBannerButton>Learn more</AlertBannerButton>
              <AlertBannerButton>Try again</AlertBannerButton>
            </AlertBanner>
          </div>
        ),
        description: "Don't include more than one action in an alert banner with the same type."
      }
    },
    {
      positive: {
        component: (
          <AlertBanner
            backgroundColor={AlertBanner.backgroundColors.DARK}
            className="monday-storybook-alert-banner_medium-container"
          >
            <AlertBannerText text="Join us at Elevate!" />
            <AlertBannerLink text="RSVP now" href="https://monday.com" />
          </AlertBanner>
        ),
        description: "Use only the 4 color types: primary, negative, positive, and inverted."
      },
      negative: {
        component: (
          <AlertBanner className="monday-storybook-alert-banner_medium-container monday-storybook-alert-banner_pink">
            <AlertBannerText text="Join us at Elevate!" />
            <AlertBannerLink text="RSVP now" href="https://monday.com" />
          </AlertBanner>
        ),
        description: "Don’t choose other colors for alert banners. Keep it consistent."
      }
    }
  ]}
/>

## Use cases and examples

### Alert banner as an announcement

Use when you'd like to notify about an event or cross-company announcment.

<Canvas of={AlertBannerStories.AlertBannerAsAnAnnouncement} />

### Alert banner as an opportunity to upgrade

Use to show a trial user the number of remaining free days to use the platform.

<Canvas of={AlertBannerStories.AlertBannerAsAnOpportunityToUpgrade} />

### Overflow text

In case that there's not enough space for the content, use an ellipses (...).

<Canvas of={AlertBannerStories.OverflowText} />

## Related components

<RelatedComponents componentsNames={[TOAST, ATTENTION_BOX, TOOLTIP]} />