Basic Usage
A wrapper which adds a pulsing dot indicator to any component. Perfect for showing notifications, unread counts, or status indicators on icons, buttons, or any other UI element. Simply wrap your component with Indicator and it automatically positions itself as a badge.
<Arrange gap="large" alignItems="center">
<Indicator>
<Icon icon={<SvgCalendar />} size={3} color="grey6" />
</Indicator>
</Arrange>
Pulse Effect
By default, the indicator includes a subtle pulsing ring effect that radiates outward from the dot. This pulse effect can be disabled when a simpler, static indicator is preferred. One example may be low bandwidth where less animation is warranted.
<Arrange gap="large" alignItems="center">
<Container>
<Text size="small" color="grey6">With Pulse</Text>
<Spacer top="small">
<Indicator color="blue">
<Icon icon={<SvgCalendar />} size={3} color="grey6" />
</Indicator>
</Spacer>
</Container>
<Container>
<Text size="small" color="grey6">Without Pulse</Text>
<Spacer top="small">
<Indicator color="blue" withPulse={false}>
<Icon icon={<SvgCalendar />} size={3} color="grey6" />
</Indicator>
</Spacer>
</Container>
</Arrange>
Color
The indicator supports two color variants to communicate different types of information:
- Orange - For notifications and alerts
- Blue - For onboarding and informational indicators
<Arrange gap="large" alignItems="center">
<Container>
<Text size="small" color="grey6">Orange (Notifications)</Text>
<Spacer top="small">
<Indicator color="orange">
<Icon icon={<SvgBell />} size={3} color="grey6" />
</Indicator>
</Spacer>
</Container>
<Container>
<Text size="small" color="grey6">Blue (Onboarding)</Text>
<Spacer top="small">
<Indicator color="blue">
<Icon icon={<SvgCalendar />} size={3} color="grey6" />
</Indicator>
</Spacer>
</Container>
</Arrange>
Props
color
'blue' | 'orange'
'blue'
children
React.ReactNode
required