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

    Class ZetaPriorityPill

    This badge is used to indicate the order of importance.

    • Main text of the priority pill.

    --priority-pill-index-background-color - Color of the index character.

    --priority-pill-index-text-color - Background color of the index.

    --priority-pill-text-color - Color of the text.

    --priority-pill-background-color - Background color of the pill.

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

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

    Hierarchy

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

    Other

    constructor index? label? rounded size status? type styles getIndex getText

    rendering

    render

    Other

    • Returns ZetaPriorityPill

    index?: string | number

    Character shown at start of component. Will be truncated to a single character if longer.

    Can also be slotted.

    The value of this property is usually a single digit number that indicates the priority level.

    label?: string

    Text of Priority.

    Can also be slotted.

    rounded: boolean
    size: "small" | "large" = "large"

    Size of the priority pill

    status?: "medium" | "urgent" | "high" | "low"

    (Optional) Status of the priority pill.

    This changes the color and content of the pill.

    If not provided, the primary color will be used.

    type: "badge" | "lozenge" = "lozenge"

    Type of the priority pill

    Lozenge shows the whole badge, including the text, while badge only shows the index character.

    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