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

100 lines
2.6 KiB
Plaintext
Raw Normal View History

2023-08-15 00:42:10 +00:00
import { Canvas, Meta, Story, ArgsTable } from "@storybook/addon-docs";
2023-08-15 00:42:10 +00:00
import {
Examples,
Example,
Note,
Title,
CustomArgsTable,
VariantsTable,
VariantRow,
} from "@calcom/storybook/components";
import { Plus } from "../icon";
import { Badge } from "./Badge";
2023-08-15 00:42:10 +00:00
<Meta title="UI/Badge" component={Badge} />
2023-08-15 00:42:10 +00:00
<Title title="Bages" suffix="Brief" subtitle="Version 2.0 — Last Update: 22 Aug 2022" />
## Definition
2023-08-15 00:42:10 +00:00
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.
2023-08-15 00:42:10 +00:00
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">
2023-08-15 00:42:10 +00:00
<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
2023-08-15 00:42:10 +00:00
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>
2023-08-15 00:42:10 +00:00
<Story
name="All Variants"
args={{
severity: "default",
label: "Badge text",
}}
argTypes={{
severity: {
control: {
type: "inline-radio",
options: ["default", "success", "gray", "error"],
},
},
2023-08-15 00:42:10 +00:00
label: {
control: {
type: "text",
},
},
2023-08-15 00:42:10 +00:00
}}>
{({ severity, label }) => (
2023-08-15 00:42:10 +00:00
<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>