Added badge component

[zahidalidev]

Badge Component Usage

The Badge component can be customized for various use cases. It is for both Markdown and TypeScript files, and we can modify its style by passing props such as backgroundColor, textColor, textSize, and variant.

Props

• variant (optional): Determines the badge style. Available options are:

  • default (default)
  • secondary
  • destructive
  • outline

• backgroundColor (optional): Custom background color for the badge. Accepts any valid CSS color value.

• textColor (optional): Custom text color for the badge. Accepts any valid CSS color value.

• textSize (optional): Controls the text size. Available options:

  • text-xs (default)
  • text-sm
  • text-base
  • text-lg
  • text-xl
  • text-2xl

• Additional props such as className or other standard HTML attributes are also supported.

Usage Examples

Default Badge

<Badge>
  Default Badge
</Badge>

Custom Colors

<Badge backgroundColor="blue" textColor="white">
  Custom Colors
</Badge>

Large Heading Badge

<Badge textSize="text-2xl">
  Large Heading Badge
</Badge>

Custom Styled Badge

<Badge backgroundColor="green" textColor="black" textSize="text-lg">
  Custom Styled Badge
</Badge>

Destructive Variant with Custom Text

<Badge variant="destructive" textColor="yellow">
  Destructive with Custom Text
</Badge>

Secondary Variant with Custom Styles

<Badge backgroundColor="purple" textColor="white" textSize="text-base">
  Secondary Variant with Custom Styles
</Badge>

Red Background with Custom Small Text

<Badge backgroundColor="green" textColor="white" textSize="text-sm">
  Red Background with Custom Small Text
</Badge>

[vercel]

@zahidalidev is attempting to deploy a commit to the Sourcegraph Team on Vercel.

A member of the Team first needs to authorize it.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
sourcegraph-docs	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Sep 25, 2024 4:22pm

[MaedahBatool]

@zahidalidev can you please add the usage guidelines of this component to the PR description before I can merge it.