Badge
Badges are elements that represent the status of an object or user input value.
- Figma:Ready
- Web:Ready
- iOS:Ready
- Package:Core
Usage
import { Badge } from "@caesars-ui/core"
The Badge component is a versatile UI element designed to visually represent the status or value of an object or user input. It supports various customization options, allowing you to tailor its appearance to suit different contexts and design needs. The Badge can display text, numbers, or icons, making it adaptable for a wide range of use cases such as notifications, statuses, and counts.
The component allows for different shapes (round or square), sizes (extra small to large), and positions (top right, bottom left, etc.), making it flexible for different layouts. You can also overlay a badge on top of other elements or place it relatively beside them. For added functionality, the Badge supports status indicators (e.g., pending, success, error) and can automatically format text and numbers, including abbreviations for large values.
Customization is further enhanced with options for background color, foreground color, border color, and icon color. The Badge component also integrates smoothly with the design system's tokens for consistent styling across your application. Additionally, it includes a skeleton variant for loading states, ensuring a seamless user experience even when data is being fetched. This robust component is designed to be a reliable and visually appealing way to convey important information at a glance.