Label

Text badges notify users of line items that need attention.

Figma Link

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

Web Components

Demo

zeta-web v0.12.1

Web Components

Storybook

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

Slots

Name	Description	Type
default	Text displayed on the label. If not provided, the label property will be used.	text

Attributes

Name	Description	Type	Default
status	Type of text label.	"info" | "positive" | "warning" | "negative" | "neutral"	"neutral"
label	Text displayed on label.Can also be slotted.	string | undefined	undefined

Inherited Attributes

Name	Description	Type	Default	Inherited From
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

Flutter

Demo

Widgetbook

https://design.zebra.com/flutter/widgetbook/index.html#/?path=components/badges/zetalabel/label

Inheritance

Object > DiagnosticableTree > Widget > StatelessWidget > ZetaStatelessWidget

Constructors

Constructs ZetaLabel.

ZetaLabel.new({bool? rounded, Key? key, required String label, ZetaWidgetStatus status = ZetaWidgetStatus.info, String? semanticLabel})

Properties

Name	Description	Type	Features
hashCode	The hash code for this object.	int	no setter inherited
key	Controls how one widget replaces another widget in the tree.	Key?	final inherited
label	Label of the badge.	String	final
rounded	Sets rounded or sharp border of the containing box and the icon style.	bool?	final inherited
runtimeType	A representation of the runtime type of the object.	Type	no setter inherited
semanticLabel	The value passed into wrapping Semantics widget.	String?	final
status	Indicates the status of the badge.	ZetaWidgetStatus	final