Back

Indicator

Color Variants

Positions

Ping Animation

Live

Badge Mode

Usage

Wrap any element with Indicator. The dot is positioned absolutely relative to the wrapped content. Set Ping: true for a live-status pulse. Set Text to show a badge count.

@display.Indicator(display.IndicatorProps{
    Position: "top-right", // "top-right" | "top-left" | "bottom-right" | "bottom-left"
    Color:    "danger",    // "brand" | "success" | "danger" | "warning" | "gray"
    Ping:     true,        // animated pulse ring
    Text:     "5",         // non-empty → badge with text; empty → dot
}) {
    <button>Notifications</button>
}