Status Label
- Web Components
- Flutter
Demo
zeta-web v0.9.0
Web Components
To help some information, labels, or errors stand out, we present them with badges. They can look like buttons, but users can’t select them. They just guide users to things they should pay attention to.
Storybook
https://design.zebra.com/web/storybook/?path=/docs/components-badges--docs
Slots
| Name | Description | Type |
|---|---|---|
| default | Text displayed on label. | text |
Attributes
| Name | Description | Type | Default |
|---|---|---|---|
| status | Type of status label. | "info" | "positive" | "warning" | "negative" | "neutral" | "neutral" |
| label | Text displayed on label.Can also be slotted. | string | undefined | undefined |
| icon | Icon leading the component. | ZetaIconName | undefined | undefined |
| showIcon | Whether to show a custom icon.An icon must be provided for this to have an effect. | boolean | true |
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 |
Demo
To help some information, labels, or errors stand out, we present them with badges.They can look like buttons, but users can’t select them. They just guide users to things they should pay attention to.
Widgetbook
Inheritance
Object > DiagnosticableTree > Widget > StatelessWidget > ZetaStatelessWidget
Constructors
Constructs ZetaStatusLabel.
ZetaStatusLabel.new({Key? key, bool? rounded, required String label, ZetaWidgetStatus status = ZetaWidgetStatus.info, IconData? icon, @Deprecated('Use icon instead of customIcon') IconData? customIcon, String? semanticLabel})
Properties
| Name | Description | Type | Features |
|---|---|---|---|
| customIcon | Optional custom icon. If null, default circle icon is used. | IconData? | final |
| hashCode | The hash code for this object. | int | no setter inherited |
| icon | Optional custom icon. If null, default circle icon is used. | IconData? | final |
| key | Controls how one widget replaces another widget in the tree. | Key? | final inherited |
| label | Text displayed on label. | 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 |
Methods
| Name | Description | Type | Features |
|---|---|---|---|
| build(BuildContext context) | Describes the part of the user interface represented by this widget. | Widget | override |
| createElement() | Creates a StatelessElement to manage this widget's location in the tree. | StatelessElement | inherited |
| debugDescribeChildren() | Returns a list of DiagnosticsNode objects describing this node's children. | List<DiagnosticsNode> | inherited |
| debugFillProperties(DiagnosticPropertiesBuilder properties) | Add additional properties associated with the node. | void | override |
| noSuchMethod(Invocation invocation) | Invoked when a nonexistent method or property is accessed. | dynamic | inherited |
| paddingAll(double space) | Available on Widget, provided by the SpacingWidget extension | Widget | undefined |
| paddingBottom(double space) | Available on Widget, provided by the SpacingWidget extension | Widget | undefined |
| paddingEnd(double space) | Available on Widget, provided by the SpacingWidget extension | Widget | undefined |
| paddingHorizontal(double space) | Available on Widget, provided by the SpacingWidget extension | Widget | undefined |
| paddingStart(double space) | Available on Widget, provided by the SpacingWidget extension | Widget | undefined |
| paddingTop(double space) | Available on Widget, provided by the SpacingWidget extension | Widget | undefined |
| paddingVertical(double space) | Available on Widget, provided by the SpacingWidget extension | Widget | undefined |
| toDiagnosticsNode({String? name, DiagnosticsTreeStyle? style}) | Returns a debug representation of the object that is used by debugging tools and by DiagnosticsNode.toStringDeep. | DiagnosticsNode | inherited |
| toString({DiagnosticLevel minLevel = DiagnosticLevel.info}) | A string representation of this object. | String | inherited |
| toStringDeep({String prefixLineOne = '', String? prefixOtherLines, DiagnosticLevel minLevel = DiagnosticLevel.debug, int wrapWidth = 65}) | Returns a string representation of this node and its descendants. | String | inherited |
| toStringShallow({String joiner = ', ', DiagnosticLevel minLevel = DiagnosticLevel.debug}) | Returns a one-line detailed description of the object. | String | inherited |
| toStringShort() | A short, textual description of this widget. | String | inherited |
Figma