Badge
Displays an indicator that requires attention.
Filled Badges
Filled badges show text or number, using primary and secondary colors.
You can use them as a standalone badge or as a relative badge applied to its children.
Dotted Badges
Dotted badge is a small dot indicates that something has changed without giving a count.
Just like the filled badges, you can have dotted badges as standalone or relative to its child.
This is a typography!
To have the larger or smaller dotted badges, use the dotSize property.
Better Placement
You can use the childShape property to place the badge way more accurately relative to the corner of the wrapped child(ren).
Visibility
The visibility of badges can be controlled using the visible property.
Alignment
You can use horizontalPosition and verticalPosition properties to move the badge to any corner of the wrapped element.
API
Learn more about the properties and the customization points.
Usage
import Badge from "@sonnat/ui/Badge";//orimport { Badge } from "@sonnat/ui";
Properties
Note that the documentation avoids mentioning all the native props (there are a lot) in this section of the components.
| Name | Type | Default | Description |
|---|---|---|---|
| text | string | - | The content of the badge. |
| className | string | - | Append to the class names applied to the component so you can override or extend the styles. |
| children | node | - | If provided the badge will be wrapped around this node. |
| parentProps | object | - | The props of the parent. If component has children, this will be applied to the container of badge and the children element. Otherwise this will be applied to the badge itself. |
| visable | boolean | true | If true, the badge will be visable. |
| dotSize | "small" | "medium" | "large" | "medium" | The size of the badge when variant="dotted". |
| color | "primary" | "secondary" | "primary" | The color of the badge. |
| variant | "filled" | "dotted" | "filled" | The variant of the badge. |
| horizontalPosition | "left" | "right" | "left" | The horizontal position of the badge. |
| verticalPosition | "top" | "bottom" | "top" | The vertical position of the badge. |
| childShape | "rectangular" | "circular" | "rectangular" | The shape of the child the badge will be wrapped around. Set this for better positioning. |
| |||