Indicator

Basic

Absolute positioning

• Indicator will be positioned absolute if Indicator have children element.

Standalone

• Indicator will be positioned initial if Indicator do not have children element.

Variants

• Button supports 2 variants: light and bold.
• Default variant is light.

Offset

• Set offset to change indicator position. It is useful when Indicator component is used with children that have border-radius.

Sizes

• Indicator supports 4 sizes xs, sm, md and lg and can be changed by passing the size prop.
• Default size is lg.
• When using xs size, Label WILL NOT rendered inside the indicator.

Customize

Indicator in Tabs

Indicator in Segmented control

Badge

Text Only

• Set text to true to display a text-only badge using the label prop.
• By default, the text prop is false.

Icon and Text

• You can pass any icon from @ocean-network-express/magenta-ui/icons (or any other ReactNode) to the leftIcon or rightIcon prop to display an icon alongside the label.
• The leftIcon and rightIcon props are only rendered when the text prop is set to true.