cal.pub0.org/packages/ui/components/badge/badge.stories.mdx

import { Canvas, Meta, Story, ArgsTable } from "@storybook/addon-docs";

import {
  Examples,
  Example,
  Note,
  Title,
  CustomArgsTable,
  VariantsTable,
  VariantRow,
} from "@calcom/storybook/components";

import { Plus } from "../icon";
import { Badge } from "./Badge";

<Meta title="UI/Badge" component={Badge} />

<Title title="Bages" suffix="Brief" subtitle="Version 2.0 — Last Update: 22 Aug 2022" />

## Definition

Badges are small status descriptors for UI elements. A badge consists of a small circle, typically containing a number or other short set of characters, that appears in proximity to another object. We provide three different type of badge such as status, alert, and brand badge.

Status badge communicate status information. It is generally used within a container such as accordion and tables to label status for easy scanning.

## Structure

<CustomArgsTable of={Badge} />

<Examples title="Badge style">
  <Example title="Gray">
    <Badge variant="gray">Badge text</Badge>
  </Example>
  <Example title="Green/Success">
    <Badge variant="success">Badge text</Badge>
  </Example>
  <Example title="Orange/Default">
    <Badge variant="default">Badge text</Badge>
  </Example>
  <Example title="Red/Error">
    <Badge variant="red">Badge text</Badge>
  </Example>
</Examples>

<Examples title="Variants">
  <Example title="Default">
    <Badge>Button text</Badge>
  </Example>
  <Example title="With Dot">
    <Badge withDot>Button Text</Badge>
  </Example>
  <Example title="With Icon">
    <Badge startIcon={Plus}>Button Text</Badge>
  </Example>
</Examples>

## Alert Badges

## Usage

Alet badge is used in conjunction with an item, profile or label to indicate numeric value and messages assocciated with them.

<Title offset title="Badge" suffix="Variants" />

<Canvas>
  <Story
    name="All Variants"
    args={{
      severity: "default",
      label: "Badge text",
    }}
    argTypes={{
      severity: {
        control: {
          type: "inline-radio",
          options: ["default", "success", "gray", "error"],
        },
      },
      label: {
        control: {
          type: "text",
        },
      },
    }}>
    {({ severity, label }) => (
      <VariantsTable titles={["Default", "With Dot", "With Icon"]} columnMinWidth={150}>
        <VariantRow variant={severity}>
          <Badge variant={severity}>{label}</Badge>
          <Badge variant={severity} withDot>
            {label}
          </Badge>
          <Badge variant={severity} startIcon={Plus}>
            {label}
          </Badge>
        </VariantRow>
      </VariantsTable>
    )}
  </Story>
</Canvas>