Status Badge
- Web Components
- Flutter
Demo
zeta-web v0.9.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 |
Demo
Badge component used with ZetaAvatar as either ZetaAvatar.upperBadge or ZetaAvatar.lowerBadge.
Inheritance
Object > DiagnosticableTree > Widget > StatelessWidget
Constructors
Constructor for ZetaAvatarBadge
ZetaAvatarBadge.new({Key? key, Color? color, ZetaAvatarBadgeType type = ZetaAvatarBadgeType.notification, IconData? icon, int? value, Color? iconColor})
Constructs ZetaAvatarBadge with icon
ZetaAvatarBadge.icon({Key? key, Color? color, IconData? icon = ZetaIcons.star, Color? iconColor, ZetaAvatarSize size = ZetaAvatarSize.xxxl})
Constructs ZetaAvatarBadge with notifications
ZetaAvatarBadge.notification({Key? key, int? value})
Properties
| Name | Description | Type | Features |
|---|---|---|---|
| color | Background color for badge | Color? | final |
| hashCode | The hash code for this object. | int | no setter inherited |
| icon | Icon of badge | IconData? | final |
| iconColor | Icon color for badge | Color? | final |
| key | Controls how one widget replaces another widget in the tree. | Key? | final inherited |
| runtimeType | A representation of the runtime type of the object. | Type | no setter inherited |
| size | Size of badge | ZetaAvatarSize | final |
| type | Type of badge | ZetaAvatarBadgeType | final |
| value | Notification value for badge | int? | final |
Methods
| Name | Description | Type | Features |
|---|---|---|---|
| build(BuildContext context) | Describes the part of the user interface represented by this widget. | Widget | override |
| copyWith({Color? color, ZetaAvatarSize? size, IconData? icon, Color? iconColor, int? value, ZetaAvatarBadgeType? type}) | ZetaAvatarBadge | undefined | |
| 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
https://www.figma.com/design/JesXQFLaPJLc1BdBM4sisI/%F0%9F%A6%93-ZDS---Components?node-id=20816-3661