ZBadge

Small status indicator badges

Example

New

Import

import { ZBadge } from "zurto-ui";

Usage

import { ZBadge } from "zurto-ui";

function Example() {
  return (
    <>
      <ZBadge color="primary">New</ZBadge>
      <ZBadge color="success">Active</ZBadge>
      <ZBadge color="warning">Pending</ZBadge>
      <ZBadge color="gray">Archived</ZBadge>
    </>
  );
}

Props

| Prop | Type | Default | Description | | ------- | ---------- | --------- | ----------- | ------- | ---------- | ----------- | ----------- | | color | 'primary' | 'success' | 'warning' | 'error' | 'gray' | 'primary' | Badge color | | size | 'sm' | 'md' | 'lg' | 'md' | Badge size |

Accessibility

• ✅ Keyboard navigation support
• ✅ ARIA attributes included
• ✅ Screen reader friendly
• ✅ Focus management