Badge
<Box className="h-10 w-10 spr-tag-02" />
import * as React from "react";
import { Badge } from "spaceweb/badge";
import { Box } from "spaceweb/box";
export default () => {
return (
<Badge
horizontalPosition="right"
verticalPosition="bottom"
intent="error"
overlap="rectangle"
size="lg"
>
<Box className="h-10 w-10 spr-tag-02" />
</Badge>
);
}
Badge generates a small badge on top of its child.
Examples
Badges in different variants and overlaps
Badges in different positions
How badges can be used with Avatar
U
U
You can check the implementation of the component for more details.
Badge exports
You can import this module like so:
import {Badge} from 'spaceweb/badge'
It exports the following components or utility functions:
- Badge
- StyledAnchor
- StyledRoot