Tag
Display current state or status of an item, process, or entity
Status tag type
- Gray: Default status tag.
- Brand: Indicates a tag related to a product's brand.
- Success: Represents a successful status or outcome.
- Danger: Indicates a critical issue or error.
- Warning: Alerts the user to a potential issue or cautionary state.
Style
- Style 1: Typically used to display a status independently, positioned absolutely on an image or container. Visually, it features a border radius of 9999px, giving it a fully rounded appearance.
- Style 2: Typically used to display a status inline, positioned side by side with text. Visually, it features a 6px border radius, giving it slightly rounded edges.
Size
Small: Typically used for small components or on smaller devices like mobile phones.
Medium: Commonly applied to medium-sized components or devices such as tablets.
Large: Designed for large components or larger devices like desktops or laptops.
Status dot (Optional)
- Dot: The optional status dot provides a visual indicator to represent the current state or status of an item.
- Small = 6x6
- Medium = 8x8
- Large = 10x10