Badge

Displays a small label for status, categorization, or metadata.

PrimarySecondaryErrorSuccessWarningInfoOutlineBeta

import { ilha } from "ilha";
import { Badge } from "areia";

export default ilha.render(() => (
  <div class="flex flex-wrap items-center gap-2">
    <Badge variant="primary">Primary</Badge>
    <Badge variant="secondary">Secondary</Badge>
    <Badge variant="error">Error</Badge>
    <Badge variant="success">Success</Badge>
    <Badge variant="warning">Warning</Badge>
    <Badge variant="info">Info</Badge>
    <Badge variant="outline">Outline</Badge>
    <Badge variant="beta">Beta</Badge>
  </div>
));

Import

import { Badge } from "areia";

Usage

New

import { ilha } from "ilha";
import { Badge } from "areia";

export default ilha.render(() => <Badge>New</Badge>);

Examples

Semantic Variants

Use semantic variants for common status and categorization states.

PrimarySecondaryErrorSuccessWarningInfoOutlineBeta

import { ilha } from "ilha";
import { Badge } from "areia";

export default ilha.render(() => (
  <div class="flex flex-wrap items-center gap-2">
    <Badge variant="primary">Primary</Badge>
    <Badge variant="secondary">Secondary</Badge>
    <Badge variant="error">Error</Badge>
    <Badge variant="success">Success</Badge>
    <Badge variant="warning">Warning</Badge>
    <Badge variant="info">Info</Badge>
    <Badge variant="outline">Outline</Badge>
    <Badge variant="beta">Beta</Badge>
  </div>
));

Other Variants

Use color variants for product-specific labels where semantic badges are not enough to convey the intended meaning or status.

NeutralRedOrangeGreenTealTeal SubtleBluePurple

import { ilha } from "ilha";
import { Badge } from "areia";

export default ilha.render(() => (
  <div class="flex flex-wrap items-center gap-2">
    <Badge variant="neutral">Neutral</Badge>
    <Badge variant="red">Red</Badge>
    <Badge variant="orange">Orange</Badge>
    <Badge variant="green">Green</Badge>
    <Badge variant="teal">Teal</Badge>
    <Badge variant="teal-subtle">Teal Subtle</Badge>
    <Badge variant="blue">Blue</Badge>
    <Badge variant="purple">Purple</Badge>
  </div>
));

In a Sentence

Badges can be used inline with nearby text to call attention to lightweight metadata.

Ilha IslandsStable

import { ilha } from "ilha";
import { Badge } from "areia";

export default ilha.render(() => (
  <p class="flex items-center gap-2 text-areia-default">
    Ilha Islands
    <Badge variant="success">Stable</Badge>
  </p>
));

API Reference

Prop	Type	Default	Description
`variant`	`"primary" \| "secondary" \| "error" \| "warning" \| "success" \| "destructive" \| "info" \| "beta" \| "outline" \| "red" \| "green" \| "neutral" \| "orange" \| "purple" \| "teal" \| "teal-subtle" \| "blue"`	`"primary"`	Color variant of the badge.
`children`	`unknown`	-	Content rendered inside the badge.
`class`	`string`	-	Additional CSS classes merged with the generated classes.
`className`	`string`	-	Alias for `class`.