ComponentsBadge

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
import type { ComponentPropsWithRef } from "react";
 
import { Badge } from "@optiaxiom/react";
 
export function App({
  intent = "success",
  variant = "light",
}: 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="light">
      <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.

"solid" | "light"

Default: light

#

Changelog

#

0.1.0

  • Added component
AvatarBanner