@zebra-fed/zeta-web
    Preparing search index...

    Class ZetaStatusLabel

    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.

    • Text displayed on label.

    container - The top level div making up the component.

    icon-container - Wrapper around the icon.

    text - The div wrapping the text of either the label or the slot.

    https://www.figma.com/file/JesXQFLaPJLc1BdBM4sisI/🦓-ZDS---Components?type=design&node-id=21836-37274

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

    Hierarchy

    • ContourableInterface<this> & LitElement<this>
      • ZetaStatusLabel
    Index

    Other

    constructor icon? label? rounded showIcon status styles

    rendering

    render

    Other

    • Returns ZetaStatusLabel

    icon?: ZetaIconName

    Icon leading the component.

    .

    undefined. This will render an indicator circle.

    label?: string

    Text displayed on label.

    Can also be slotted.

    undefined. This will render a slot for text.

    If provided, it will override the slot.

    rounded: boolean
    showIcon: boolean = true

    Whether to show the icon.

    If [icon] is undefined, an indicator circle will be rendered.

    status: "positive" | "negative" | "info" | "neutral" | "warning" = "neutral"

    Type of status label.

    styles: CSSResultGroup[] = ...

    rendering

    • Invoked on each update to perform rendering tasks. This method may return any value renderable by lit-html's ChildPart - typically a TemplateResult. Setting properties inside this method will not trigger the element to update.

      Returns TemplateResult<1>

    Settings

    Member Visibility

    On This Page

    Other
    rendering