Badge
Use to emphasize a status, count, state or value.
#
Documentation
#
#
Usage
#
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.
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.
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.
|
className
|
intent Control the appearance by selecting between the different badge types.
Default: |
lineClamp Truncate the text at specific number of lines.
|
truncate Whether to truncate the text and add an ellipsis at the end.
|
variant Control the style of the badge.
Default: |
#
Changelog
#
#
0.13.0
#
- Renamed variants
light -> subtle
andsolid -> strong
#
0.1.0
#
- Added component