Badge

Generate an helper for your text

Import

import { Badge } from "@webeetle/windy";

Contained Badge

Result

Badge

Badge

Badge

Live Editor

<div className="flex w-full space-x-5 justify-center items-center"> <Badge text="Badge" /> <Badge color="red" text="Badge" /> <Badge color="green" text="Badge" /> </div>

<div className="flex w-full space-x-5 justify-center items-center">
  <Badge text="Badge" />
  <Badge color="red" text="Badge" />
  <Badge color="green" text="Badge" />
</div>

Shadows

Result

none

sm

md

lg

xl

Live Editor

<div className="flex space-x-5 justify-center items-center overflow-x-scroll md:overflow-x-auto pb-10"> <Badge shadow="none" text="none" /> <Badge shadow="sm" text="sm" /> <Badge shadow="md" text="md" /> <Badge shadow="lg" text="lg" /> <Badge shadow="xl" text="xl" /> </div>

<div className="flex space-x-5 justify-center items-center overflow-x-scroll md:overflow-x-auto pb-10">
  <Badge shadow="none" text="none" />
  <Badge shadow="sm" text="sm" />
  <Badge shadow="md" text="md" />
  <Badge shadow="lg" text="lg" />
  <Badge shadow="xl" text="xl" />
</div>

Sizes

Result

xs

sm

md

lg

xl

Live Editor

<div className="flex space-x-5 justify-center items-center overflow-x-scroll md:overflow-x-auto pb-5"> <Badge size="xs" text="xs" /> <Badge size="sm" text="sm" /> <Badge size="md" text="md" /> <Badge size="lg" text="lg" /> <Badge size="xl" text="xl" /> </div>

<div className="flex space-x-5 justify-center items-center overflow-x-scroll md:overflow-x-auto pb-5">
  <Badge size="xs" text="xs" />
  <Badge size="sm" text="sm" />
  <Badge size="md" text="md" />
  <Badge size="lg" text="lg" />
  <Badge size="xl" text="xl" />
</div>

Custom Badge

Result

Custom

Live Editor

<div className="flex w-full justify-center items-center"> <Badge text="Custom" color="none" layout="text" className="text-red-800 text-sm px-2 py-1 bg-gradient-to-l from-red-500 to-yellow-300" /> </div>

<div className="flex w-full justify-center items-center">
  <Badge
    text="Custom"
    color="none"
    layout="text"
    className="text-red-800 text-sm px-2 py-1 bg-gradient-to-l from-red-500 to-yellow-300"
  />
</div>

Props

Props	Type	Default
text	string	Badge
size	["xs", "sm", "md", "lg", "xl"]	md
color	[ "gray", "red", "yellow", "green", "blue", "indigo", "purple", "pink","none"]	indigo
rounded	["sm", "md", "lg", "full", "none"]	md
shadow	["sm", "md", "lg", "full", "none"]	md