@purpurds/badge

import { Meta, Stories, ArgTypes, Primary, Subtitle } from "@storybook/blocks";

import * as BadgeStories from "./src/badge.stories"; import packageInfo from "./package.json";

Badge

Version {packageInfo.version}

Showcase

Properties

Installation

Via NPM, in the monorepo

Add the dependency to your consumer app like "@purpurds/purpur": "^x.y.z"

Usage

In MyApp.tsx

import "@purpurds/purpur/styles";

Standard

In MyComponent.tsx

import { Badge } from "@purpurds/purpur";

export const MyComponent = () => <Badge variant="success">Great success 👌</Badge>;

With custom icon

In MyComponent.tsx

import { Badge, IconSmileyHappy } from "@purpurds/purpur";

export const MyComponent = () => (
  <Badge variant="success" showIcon={false}>
    <IconSmileyHappy size="xs" />
    Great success 👌
  </Badge>
);