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 colorScheme="danger">99+</Badge>
    </Flex>
  );
}

#
Appearance

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

Pending

Color scheme

Variant

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

#
Links

#
Badge as links

Set asChild to true and pass an <a> element as the child 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>
  );
}

#
Props

#
`Badge`

Supports all Box props in addition to its own.

Name	Type
asChild	`false \| true`
colorScheme	`"primary" \| "danger" \| "information" \| "neutral" \| "success" \| "warning"` = `"neutral"`
variant	`"solid" \| "light"` = `"light"`

#
Changelog

#
0.1.0

Added component

Alert Progress