Class ZetaIndicator

Indicators are used to show the status of a user or any messages/notifications they might have.

Figma

https://www.figma.com/file/JesXQFLaPJLc1BdBM4sisI/🦓-ZDS---Components?type=design&node-id=22000-10045&mode=design&t=6mhOcUUr3tgxxFdd-0

Figma

https://www.figma.com/file/JesXQFLaPJLc1BdBM4sisI/🦓-ZDS---Components?type=design&node-id=22000-10072&mode=design&t=6mhOcUUr3tgxxFdd-0

Storybook

https://zeta-ds.web.app/web/storybook/?path=/docs/badges--docs

Hierarchy (view full)

Other

constructor icon inverse rounded size type value styles

rendering

render

Other

constructor

  • new ZetaIndicator(): ZetaIndicator

  • Returns ZetaIndicator

icon

icon: ZetaIconName = "star"

Icon to be shown on icon type indicator.

Full list of icons can be found at Zeta Icons.

inverse

inverse: boolean = false

Whether indicator is to be on an inverse background.

Adds an inverse color border to the indicator.

rounded

rounded: boolean

size

size: "small" | "medium" | "large"

type

type: "icon" | "notification" = "notification"

Whether to render as a notification or icon indicator.

value

value: string | boolean = false

Staticstyles

styles: CSSResultGroup[] = ...

rendering

Protectedrender

  • render(): TemplateResult<1>

  • 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