Density

Indicator

Indicator renders a decorative marker that inherits the current text color.

import { Indicator, View } from "density-base-ui";

export default function IndicatorExample() {
  return (
    <View align="start" gap="md" padding={false}>
      <Indicator size="lg" />
    </View>
  );
}

Indicator is decorative and always renders with aria-hidden="true".

Color

Failed
Delayed
Healthy
import { Indicator, View } from "density-base-ui";

export default function IndicatorColorExample() {
  return (
    <View gap="sm" padding={false}>
      <View align="center" gap="sm" orientation="horizontal" padding={false}>
        <Indicator color="destructive" />
        Failed
      </View>
      <View align="center" gap="sm" orientation="horizontal" padding={false}>
        <Indicator color="warning" />
        Delayed
      </View>
      <View align="center" gap="sm" orientation="horizontal" padding={false}>
        <Indicator color="success" />
        Healthy
      </View>
    </View>
  );
}

Style

Use the default dot style for status markers. Set indicatorStyle="swatch" for a slightly larger rounded square, such as a chart series marker.

DotSwatch
import { Indicator, View } from "density-base-ui";

export default function IndicatorStyleExample() {
  return (
    <View align="center" gap="md" orientation="horizontal" padding={false}>
      <Indicator color="success" indicatorStyle="dot" size="lg" />
      Dot
      <Indicator color="success" indicatorStyle="swatch" size="lg" />
      Swatch
    </View>
  );
}

In controls

Use Indicator with a text label inside controls and status labels.

Online
import { Badge, Button, Indicator, View } from "density-base-ui";

export default function IndicatorCompositionExample() {
  return (
    <View align="center" orientation="horizontal" padding={false} wrap>
      <Button type="button">
        <Indicator />
        Syncing
      </Button>
      <Badge>
        <Indicator />
        Online
      </Badge>
    </View>
  );
}

Size

2xs
xs
sm
md
lg
xl
2xl
3xl
import { Indicator, View } from "density-base-ui";

export default function IndicatorSizeExample() {
  return (
    <View align="start" gap="md" padding={false}>
      <View
        align="center"
        gap="md"
        orientation="horizontal"
        padding={false}
        wrap
      >
        <Indicator size="2xs" />
        2xs
      </View>
      <View
        align="center"
        gap="md"
        orientation="horizontal"
        padding={false}
        wrap
      >
        <Indicator size="xs" />
        xs
      </View>
      <View
        align="center"
        gap="md"
        orientation="horizontal"
        padding={false}
        wrap
      >
        <Indicator size="sm" />
        sm
      </View>
      <View
        align="center"
        gap="md"
        orientation="horizontal"
        padding={false}
        wrap
      >
        <Indicator size="md" />
        md
      </View>
      <View
        align="center"
        gap="md"
        orientation="horizontal"
        padding={false}
        wrap
      >
        <Indicator size="lg" />
        lg
      </View>
      <View
        align="center"
        gap="md"
        orientation="horizontal"
        padding={false}
        wrap
      >
        <Indicator size="xl" />
        xl
      </View>
      <View
        align="center"
        gap="md"
        orientation="horizontal"
        padding={false}
        wrap
      >
        <Indicator size="2xl" />
        2xl
      </View>
      <View
        align="center"
        gap="md"
        orientation="horizontal"
        padding={false}
        wrap
      >
        <Indicator size="3xl" />
        3xl
      </View>
    </View>
  );
}