Badge

Use to emphasize a status, count, state or value.

#
Documentation

#
Usage

Status99+


import { Badge, Flex } from "@optiaxiom/react";
 
export function App() {
  return (
    <Flex flexDirection="row">
      <Badge>Status</Badge>
 
      <Badge intent="danger">99+</Badge>
    </Flex>
  );
}

#
Appearance

Use the intent and variant props to fine tune the appearance of the badge.

Pending

Intent

Variant


import type { ComponentPropsWithRef } from "react";
 
import { Badge } from "@optiaxiom/react";
 
export function App({
  intent = "success",
  variant = "subtle",
}: Pick<ComponentPropsWithRef<typeof Badge>, "intent" | "variant">) {
  return (
    <Badge intent={intent} variant={variant}>
      Pending
    </Badge>
  );
}

#
Badge as links

Set asChild to true and wrap children in an <a> element to render badge as links.

Status


import { Badge } from "@optiaxiom/react";
 
export function App() {
  return (
    <Badge asChild variant="subtle">
      <a href="./props">Status</a>
    </Badge>
  );
}

#
Related

Indicator

Display a badge at the corner of another element.

#
Props

#
Badge

Supports all Box props in addition to its own. Renders a <span> element.

Prop
`asChild` Change the default rendered element for the one passed as a child, merging their props and behavior. Read the Composition guide for more details. `false \| true`
`className` `string`
`intent` Control the appearance by selecting between the different badge types. `"information" \| "success" \| "warning" \| "danger" \| "neutral" \| "primary"` Default: `neutral`
`lineClamp` Truncate the text at specific number of lines. `"1" \| "2" \| "3" \| "4"`
`truncate` Whether to truncate the text and add an ellipsis at the end. `false \| true`
`variant` Control the style of the badge. `"strong" \| "subtle"` Default: `subtle`