Badge

The badge is a visual indicator to highlight an item's status for quick recognition.

import { Badge } from '@backyard-ui/core';

Use the appearance prop to change the visual semantic of the Badge.

By default variant prop is solid but you can use subtle to get a different style.

Currently we support icon only on left side.

• color
  Description The badge color

  Type

  "orange"
• children required
  Description The children elements

  Type

  ReactNode
• appearance
  Description The badge appearance

  Type

  "success" | "critical" | "info" | "warning" | "neutral" | "primary" | "secondary" | "tertiary"

  Default

  primary
• variant
  Description The variant is used to change the visual communication

  Type

  "solid" | "subtle"

  Default

  solid
• iconLeft
  Description Icon rendered on the left side of label

  Type

  ReactNode
• iconRight
  Description Icon rendered on the right side of label

  Type

  ReactNode
• isFullWidth
  Description Set `width` to 100%

  Type

  boolean