Skip to main content

Status Badge

Status badges used to show more information on an Avatar.

Figma Link

https://www.figma.com/design/JesXQFLaPJLc1BdBM4sisI/%F0%9F%A6%93-ZDS---Components?node-id=20816-3661

Web Components
Flutter

Demo

zeta-web v1.4.0

Web Components

Indicators are used to show the status of a user or any messages/notifications they might have.

Storybook

https://design.zebra.com/web/storybook/?path=/docs/components-badges--docs

Slots

Name	Description	Type
default	Value to be displayed inside the indicator. If the `type` is set to `notification`, this should be the number or text shown inside the indicator. If the `type` is set to `icon`, this should be an icon or any other content you want to display. There is first class support for the `zeta-icon` component, which can be used to display icons inside the indicator.	`text`

Attributes

Name	Description	Type	Default
icon	Icon to be shown on icon type indicator.Full list of icons can be found at https://design.zebra.com/icons Zeta Icons.	`ZetaIconName \| undefined`	`undefined`
type	Whether to render as a notification or icon indicator.	`"icon" \| "notification"`	`"notification"`
value	Value to be displayed inside the indicator.The value should not be negative.If the value is above 99, it will be displayed as "99+".The value will determine the size of the indicator when the type is set to "notification".If the value is above 99, the size will be set to "large".If the value is a number, it will be displayed as a number.s	`number \| undefined`	`undefined`

Inherited Attributes

Name	Description	Type	Default	Inherited From
size	Size of component	`SizeType`	`"medium"`	Size
rounded	Whether the component is rounded or sharp.When true, rounded will set the border radius of the first child, and any children with class 'contourable-target' to `--radius-minimal`.Otherwise, this value will be `--radius-none`.	`boolean \| undefined`	`true`	Contourable