Badge

Badge is a component that emphasizes the status of an item to make it immediately recognizable.

Import

import { Badge } from "@yamada-ui/react"

Copied!

Usage

Editable example

<Badge>New</Badge>

Copied!

Change Variant

Editable example

<Wrap gap="md">
  <For
    each={[
      { variant: "subtle", colorScheme: "primary" },
      { variant: "solid", colorScheme: "secondary" },
      { variant: "outline", colorScheme: "success" },
    ]}
  >
    {({ variant, colorScheme }, index) => (
      <Badge key={index} variant={variant} colorScheme={colorScheme}>
        {colorScheme}
      </Badge>
    )}
  </For>
</Wrap>

Copied!

Change Color Scheme

Editable example

<VStack>
  <Wrap gap="md">
    <For
      each={[
        "primary",
        "secondary",
        "success",
        "warning",
        "danger",
        "link",
        "gray",
        "neutral",
        "red",
        "rose",
        "pink",
        "orange",
        "amber",
        "yellow",
        "lime",
        "green",
        "emerald",
        "teal",
        "cyan",
        "sky",
        "blue",
        "indigo",
        "violet",
        "purple",
        "fuchsia",
      ]}
    >
      {(colorScheme, index) => (
        <Badge key={index} variant="subtle" colorScheme={colorScheme}>
          {colorScheme}
        </Badge>
      )}
    </For>
  </Wrap>

  <Wrap gap="md">
    <For
      each={[
        "primary",
        "secondary",
        "success",
        "warning",
        "danger",
        "link",
        "gray",
        "neutral",
        "red",
        "rose",
        "pink",
        "orange",
        "amber",
        "yellow",
        "lime",
        "green",
        "emerald",
        "teal",
        "cyan",
        "sky",
        "blue",
        "indigo",
        "violet",
        "purple",
        "fuchsia",
      ]}
    >
      {(colorScheme, index) => (
        <Badge key={index} variant="solid" colorScheme={colorScheme}>
          {colorScheme}
        </Badge>
      )}
    </For>
  </Wrap>

  <Wrap gap="md">
    <For
      each={[
        "primary",
        "secondary",
        "success",
        "warning",
        "danger",
        "link",
        "gray",
        "neutral",
        "red",
        "rose",
        "pink",
        "orange",
        "amber",
        "yellow",
        "lime",
        "green",
        "emerald",
        "teal",
        "cyan",
        "sky",
        "blue",
        "indigo",
        "violet",
        "purple",
        "fuchsia",
      ]}
    >
      {(colorScheme, index) => (
        <Badge key={index} variant="outline" colorScheme={colorScheme}>
          {colorScheme}
        </Badge>
      )}
    </For>
  </Wrap>
</VStack>

Copied!

Edit this page on GitHub

PreviousTag NextKbd