Display@knitui/components

Indicator

Indicator overlays a small dot or label badge on a corner/edge of its children. Accent comes from the active theme palette ramp. position, offset, size, withBorder, disabled, processing, label, maxValue, and showZero mirror Mantine's surface.

WebiOSAndroid3 style slots9 own props12 examples

Stories Source Tests Open in Storybook

import { Indicator } from "@knitui/components";

Playground

Loading playground…

positionCorner / edge the indicator is anchored to.

sizeDot/badge width and height; named values resolve against the size scale.

offsetSpace-token or pixel nudge from the anchored edge(s).

labelContent inside the indicator — turns the dot into a pill badge.

maxValueNumeric cap; values above it render as `{maxValue}+`.

withBorder

false

disabled

false

processing

false

showZero

true

themeActive theme accent — recolors the dot via the palette ramp.

Playground

<Indicator
  position="top-end"
  size="xxs"
  withBorder={false}
  disabled={false}
  processing={false}
  showZero
/>

Examples

Positions

All nine anchor positions around the same target element.

Loading example…

PositionsSource Storybook

Sizes

The seven named sizes resolve against the $size token scale.

Loading example…

SizesSource Storybook

With Label

Dot turns into a pill badge when a label is provided.

Loading example…

With LabelSource Storybook

Max Value

Values exceeding maxValue are clamped and rendered as {maxValue}+.

Loading example…

Max ValueSource Storybook

Disabled

disabled hides the dot while still rendering children.

Loading example…

DisabledSource Storybook

Processing

processing animates the dot with a continuous opacity pulse plus a one-shot scale-in entrance. The pulse rides on the anchor wrapper while the entrance rides on the dot, so the two animation drivers never share a node (a bare dot, a label pill, and the size ladder all exercise that split — the path that crashed reanimated on native when both ran on one node).

Loading example…

ProcessingSource Storybook

With Border

withBorder adds a ring in the page background so the dot separates from the target.

Loading example…

With BorderSource Storybook

Show Zero

showZero controls whether a zero label is rendered or suppressed.

Loading example…

Show ZeroSource Storybook

Shadows

The inherited shadow elevation prop, from xs to xl.

Loading example…

ShadowsSource Storybook

Styles

Per-slot styles targets individual parts — here the dot and label.

Loading example…

StylesSource Storybook

Themed

The palette ramp follows the active theme — same component, different accent color.

Loading example…

ThemedSource Storybook

Props

Prop	Type	Default	Description
`autoContrast`	`boolean \| undefined`	—	Accepted for Mantine parity. Text already contrasts the accent fill via the ramp (`$color1` on `$color9`), so this is effectively always on.
`disabled` system	`boolean \| undefined`	`false`	Hide the indicator while still rendering children.
`label`	`ReactNode`	—	Content inside the indicator — turns the dot into a pill badge.
`maxValue`	`number \| undefined`	—	Numeric cap; values above it render as `{maxValue}+`.
`offset`	`IndicatorOffset \| IndicatorOffsetObject \| undefined` 0 · 0 · xxs · xs · sm · md · lg · xl · xxl	`0`	Space-token or pixel nudge from the anchored edge(s).
`position`	`IndicatorPosition \| undefined` top-start · top-center · top-end · middle-start · middle-center · middle-end · bottom-start · bottom-center · bottom-end	`'top-end'`	Corner / edge the indicator is anchored to.
`processing`	`boolean \| undefined`	`false`	Animate the dot with a continuous opacity pulse (plus a scale-in entrance).
`radius` system	`string \| number \| undefined`	`round`	Rounding of the dot/badge. Token, CSS value, or number.
`shadow` system	`"xs" \| "sm" \| "md" \| "lg" \| "xl" \| "xxs" \| "xxl" \| undefined`	—
`showZero`	`boolean \| undefined`	`true`	Render the indicator when the label is `0`.
`size` system	`number \| "xs" \| "sm" \| "md" \| "lg" \| "xl" \| "xxs" \| (string & {}) \| "xxl" \| undefined` xxs · xs · sm · md · lg · xl · xxl	`'xxs'`	Dot/badge width and height; named values resolve against the size scale.
`styles` system	`SlotStyles<IndicatorStyles> \| undefined`	—	Per-slot style sugar — props spread onto the matching styled part.
`theme` system	`ThemeName \| null \| undefined` unset · blue · red · green · yellow · pink · gray	—	Active theme accent — recolors the dot via the palette ramp.
`withBorder`	`boolean \| undefined`	`false`	Adds a `$background` ring so the dot separates from the target.
`zIndex`	`number \| undefined`	`1`	z-index of the indicator dot/badge.

Style slots

Every part of Indicator can be styled through the styles prop. Explicit props on the component always win over slot styles.

Slot	Usage
`dot`	`styles={{ dot: { … } }}`
`label`	`styles={{ label: { … } }}`
`root`	`styles={{ root: { … } }}`

Accessibility & DOM props (2)

Prop	Type
`key`	`Key \| null \| undefined`
`ref`	`Ref<TamaguiElement> \| undefined`

Plus 497 inherited style props from Box — the full Tamagui/React Native style surface, including token shorthands like p, mx, bg and c. See Tokens for the scales they accept, or the full list.