Leave Yamada UI a star

Star
Yamada UIYamada UIv1.6.4

Indicator

Indicator is a component that displays at the corner of elements such as avatars.

Source@yamada-ui/indicator

Props

IndicatorProps

colorScheme

Description

The visual color appearance of the component.

Type

"blackAlpha" | "whiteAlpha" | "amber" | "blue" | "info" | "link" | "primary" | "cyan" | "emerald" | "flashy" | "fuchsia" | "gray" | "green" | "success" | "indigo" | "lime" | "neutral" | "orange" | "warning" | "pink" | "purple" | "red" | "danger" | "rose" | "sky" | "teal" | "violet" | "secondary" | "yellow"

Default

"primary"

containerProps

Description

Props for indicator wrapper element.

Type

Omit<HTMLUIProps, "children">

inline

Description

If true, set the indicator as an inline element.

Type

UIValue<boolean>

Default

false

isDisabled

Description

If true, the indicator will be disabled.

Type

boolean

Default

false

label

Description

The indicator label to use.

Type

type ONLY_FOR_FORMAT = | string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal

offset

Description

Changes position offset, usually used when element has border-radius.

Type

UIValue<number>

Default

0

overflowCount

Description

If label is of type number, the maximum number displayed.

Type

number

Default

99

ping

Description

If true, make an element scale and fade like a radar ping or ripple of water.

Type

boolean

Default

false

pingColor

Description

It is used for the color of the ping animation.

Type

UIValue<"border" | ({} & string) | BackgroundColor | "amber.50" | "amber.100" | "amber.200" | "amber.300" | "amber.400" | "amber.500" | "amber.600" | "amber.700" | ... 320 more ... | "yellow.950">

Default

var(--ui-ping)

pingCount

Description

It is used for the count of the ping animation.

Type

AnimationIterationCount

Default

infinite

pingDuration

Description

It is used for the duration of the ping animation.

Type

AnimationDirection

Default

1.4s

pingScale

Description

It is used for the scale of the ping animation.

Type

number

Default

1.8

placement

Description

The placement of the indicator.

Type

UIValue<| "bottom" | "left" | "right" | "top" | "bottom-left" | "bottom-right" | "top-left" | "top-right">

Default

'top-right'

showZero

Description

If true, display 0.

Type

boolean

Default

true

size

Description

The size of the Indicator.

Type

"sm" | "md" | "lg"

Default

"md"

variant

Description

The variant of the Indicator.

Type

"solid" | "subtle"

Default

"solid"

withBorder

Description

If true, display the border of the indicator.

Type

boolean

Default

false

Edit this page on GitHub

PreviousAvatarNextTransitions