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
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.
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 |
|
colorScheme |
|
variant |
|
#
Changelog
#
#
0.1.0
#
- Added component