Badges - hextastudio/ui

hextastudio/ui needs your support to stay running 🫶 Help us

Preview

Latest version

Installation

bash

npx hexta-ui add badge

tsx

import { Badge } from "@/components/hexta-ui/Badge";

Preview

Latest version

tsx

<Badge>Latest version</Badge>

Preview

Info

tsx

<Badge variant="info" outlined>Info</Badge>

Preview

Success

tsx

<Badge pill icon>Success</Badge>

Preview

Notifications5

tsx

<Badge counter={5}>Notifications</Badge>

Preview

Glowing Secondary

tsx

<Badge variant="secondary" glowing>Glowing Secondary</Badge>

Preview

Pulsing Primary

tsx

<Badge variant="primary" animated>Pulsing Primary</Badge>

Preview

PrimarySecondary

tsx

<div className="inline-flex overflow-hidden rounded-lg">
  <Badge segmented className="rounded-e-sm">Primary</Badge>
  <Badge variant="secondary" segmented className="rounded-s-sm">Secondary</Badge>
</div>

Props Information

Prop Name

Prop Type

Default Value

Description

Prop Name	Prop Type	Default Value	Description