Components
Indicator
Indicators precisely position elements at the corners of other elements, improving visual alignment in user interfaces.
Basic
Indicator
The `indicator` component acts as a container for indicators, with the `indicator-item` class offering default positioning. Tailwind utility classes enable control over size, background color, and roundness of the indicators.
Status as indicator
Use `status` for status style indicator.
Badge as indicator
Use `badge` for badge style indicator.
Pill badge as indicator
Using the `rounded-full` class with `badge` creates a pill-shaped badge as an indicator.
Illustrations
Indicator on avatar
Avatar with an indicator badge denoting the user's status.
Indicator on input
Input field with a prominent indicator badge denoting a required entry.
Button indicator
Button indicator provides a visual cue for interacting with content or actions within a container.
Card Title
Rerum reiciendis beatae tenetur excepturi
Animation
Ping animation
Include the `animate-ping` utility to enable an element to scale and fade, resembling a radar ping or water ripple effect, which is beneficial for features like notification badges.
Pulse animation
Apply the class `animation-pulse` to integrate this animated loading indicator for situations where content within a card is loading.
Positions
Indicator
The Indicators can be positioned at.
Badge indicator
The badge display can be positioned at.
Responsive
Position based on resolution
Utilize responsive modifiers like `sm`, `md`, `lg` to adjust the indicator's position based on screen size.
Class referenceThe component, style, color, state, size and modifier classes available for this component.
| Class | Type | Description |
|---|---|---|
indicator | component | Container element. |
indicator-item | part | Will be placed on the corner of sibling. |
indicator-start | placement | Align horizontally to the start. |
indicator-center | placement | Align horizontally to the center. |
indicator-end | placement | Align horizontally to the end (default). |
indicator-top | placement | Align vertically to top (default). |
indicator-middle | placement | Align vertically to middle. |
indicator-bottom | placement | Align vertically to bottom. |