Runway

Indicator

Offer

The Indicator component is a small badge or dot that can be used to indicate the status of an item, such as a notification or an unread message. It can be customized with different colors, sizes, and positions.

Usage

javascript
1import Indicator from "@/components/atoms/Indicator";
2
3<Indicator color="red" content="3+">
4    <Card borderRadius="sm" className="flex px-4 py-2">
5        Indicator
6    </Card>
7</Indicator>

The Indicator pairs well with the Card component.

Props

Prop	Type	Default	Description
children	ReactNode	-	The content that the indicator will be attached to.
content	string	`""`	The content of the indicator.
color	string	`"bg"`	The base color (use tailwind.config).
variant	string	`"solid"`	The variant of the indicator.
position	string	`"top-right"`	The position of the indicator.
size	string	`"md"`	The size of the indicator.
borderRadius	string	`"full"`	The border radius of the indicator.
border	boolean	`false`	If true, the indicator will have a border.
ping	boolean	`false`	If true, the indicator will have a ping effect.
pingScale	number	`0.1`	The scale of the ping effect.
className	string	`""`	Additional Tailwind utility classes.
...props	object	-	Any other valid HTML attributes.

Examples

Basic Indicator

Wrap your desired component with the Indicator component. Then, style or add content as needed.

Indicator

Offer

Customized Indicator

You can further customize the Indicator component by changing its color, size, and position.

Indicator

New

Indicator

Alert

Indicator

Ping