Badge

Badge communicates status and small metadata labels.

Quick Preview

DefaultPrimarySuccessWarningDanger

Preset Examples

Code

<Badge variant="default">Draft</Badge>
<Badge variant="primary">Featured</Badge>
<Badge variant="success">Completed</Badge>
<Badge variant="warning">Pending</Badge>
<Badge variant="danger">Failed</Badge>

Interactive Playground

Active

Override variant with custom colorUse gradientRadius (10px)

Code

import { Badge } from "@altech-ui/react";

export function Example() {
  return (
    <Badge
      variant="success"
      className="px-2.5 py-1 text-xs"
      style={{
        borderRadius: "10px",

      }}
    >
      Active
    </Badge>
  );
}

Usage

Code

import { Badge } from "@altech-ui/react"
 
<Badge variant="success">Active</Badge>

Props

variant?: default | primary | success | warning | danger
Native span props