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.

neutralinformationsuccesswarningdangerprimary


import { Badge, Flex } from "@optiaxiom/react";
 
const appearances = [
  "neutral",
  "information",
  "success",
  "warning",
  "danger",
  "primary",
] as const;
 
export function App() {
  return (
    <Flex>
      <Flex flexDirection="row">
        {appearances.map((intent) => (
          <Badge intent={intent} key={intent}>
            {intent}
          </Badge>
        ))}
      </Flex>
      <Flex flexDirection="row">
        {appearances.map((intent) => (
          <Badge intent={intent} key={intent} variant="strong">
            {intent}
          </Badge>
        ))}
      </Flex>
    </Flex>
  );
}

#
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`