Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/tailor-platform/app-shell/llms.txt

Use this file to discover all available pages before exploring further.

The Badge component provides a flexible way to display tags, statuses, and labels with semantic meaning. It supports both solid filled variants and outlined variants with status indicators.

​
Import

import { Badge } from "@tailor-platform/app-shell";

​
Basic Usage

<Badge variant="success">Active</Badge>
<Badge variant="warning">Pending</Badge>
<Badge variant="error">Failed</Badge>

​
Props

​
variant
BadgeVariant
default:"default"
Badge style variant that determines the visual appearanceAvailable variants:
  • default - Primary color badge
  • success - Green background, white text
  • warning - Yellow background, white text
  • error - Red/destructive background, white text
  • neutral - Secondary color badge
  • outline-success - Outlined with green status dot
  • outline-warning - Outlined with orange status dot
  • outline-error - Outlined with red status dot
  • outline-info - Outlined with blue status dot
  • outline-neutral - Outlined with neutral status dot
​
children
React.ReactNode
required
Badge content (typically text)
​
className
string
Additional CSS classes for custom styling

​
Variant Examples

​
Solid Variants

Solid badges have colored backgrounds with contrasting text: 
import { Badge } from "@tailor-platform/app-shell";

const StatusDisplay = () => (
  <div className="flex gap-2">
    <Badge variant="default">Default</Badge>
    <Badge variant="success">Success</Badge>
    <Badge variant="warning">Warning</Badge>
    <Badge variant="error">Error</Badge>
    <Badge variant="neutral">Neutral</Badge>
  </div>
);

​
Outline Variants

Outline badges have a border and include a colored status dot: 
import { Badge } from "@tailor-platform/app-shell";

const OutlineStatusDisplay = () => (
  <div className="flex gap-2">
    <Badge variant="outline-success">Confirmed</Badge>
    <Badge variant="outline-warning">Pending Review</Badge>
    <Badge variant="outline-error">Rejected</Badge>
    <Badge variant="outline-info">In Progress</Badge>
    <Badge variant="outline-neutral">Draft</Badge>
  </div>
);

​
Common Use Cases

​
Order Status

const OrderStatus = ({ status }: { status: string }) => {
  const variantMap: Record<string, BadgeVariant> = {
    CONFIRMED: "outline-success",
    PENDING: "outline-warning",
    CANCELLED: "outline-error",
    SHIPPED: "outline-info",
  };

  return (
    <Badge variant={variantMap[status] || "outline-neutral"}>
      {status}
    </Badge>
  );
};

​
User Role Tags

const UserRole = ({ role }: { role: string }) => {
  const roleVariants: Record<string, BadgeVariant> = {
    admin: "error",
    manager: "warning",
    staff: "neutral",
  };

  return (
    <Badge variant={roleVariants[role] || "neutral"}>
      {role.toUpperCase()}
    </Badge>
  );
};

​
Payment Status

const PaymentStatus = ({ isPaid }: { isPaid: boolean }) => (
  <Badge variant={isPaid ? "success" : "warning"}>
    {isPaid ? "Paid" : "Unpaid"}
  </Badge>
);

​
Integration with DescriptionCard

Badges work seamlessly with the DescriptionCard component for status fields: 
import { DescriptionCard } from "@tailor-platform/app-shell";

const OrderDetails = ({ order }) => (
  <DescriptionCard
    data={order}
    title="Order Summary"
    fields={[
      {
        key: "status",
        label: "Status",
        type: "badge",
        meta: {
          badgeVariantMap: {
            CONFIRMED: "outline-success",
            PENDING: "outline-warning",
            CANCELLED: "outline-error",
          },
        },
      },
      // ... other fields
    ]}
  />
);

​
TypeScript

The component exports its prop types for TypeScript usage: 
import { type BadgeProps } from "@tailor-platform/app-shell";

const MyComponent = (props: BadgeProps) => {
  return <Badge {...props} />;
};

​
Accessibility

The Badge component:
  • Uses semantic HTML with proper color contrast ratios
  • Includes focus states for interactive use cases
  • Supports all standard HTML div attributes

​
Styling

The Badge component uses Tailwind CSS utilities and can be customized: 
// Add custom spacing or positioning
<Badge variant="success" className="ml-2 mr-4">
  Active
</Badge>

// Combine with other elements
<div className="flex items-center gap-2">
  <span>Order Status:</span>
  <Badge variant="outline-success">Confirmed</Badge>
</div>

Build docs developers (and LLMs) love

Get started for freeTalk to us