Class ZetaIconButton

ZetaIconButton web component.

A button containing a Zeta Icon.

Cssproperty

--icon-button-color the color of the button.

Cssproperty

--icon-button-icon-color the color of the icon.

Cssproperty

--icon-button-icon-color-disabled the color of the icon when the button is disabled.

Slot

  • The name of the icon. Full list of icons can be found at Zeta Icons.

Figma

https://www.figma.com/file/JesXQFLaPJLc1BdBM4sisI/🦓-ZDS---Components?node-id=23126-110314

Storybook

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

Hierarchy (view full)

Other

constructor _buttonType disabled flavor internals leading? name? rounded size trailing? type? value? formAssociated shadowRootOptions styles _handleClick blur click focus

rendering

render

Other

constructor

Protected Internal_buttonType

_buttonType: "text" | "icon" = "icon"

disabled

disabled: boolean

flavor

flavor: ButtonFlavor = "primary"

Protectedinternals

internals: ElementInternals

Optionalleading

leading?: Node[]

Optionalname

name?: string

Name for the button, used if the button is in a form.

rounded

rounded: boolean

size

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

Optionaltrailing

trailing?: Node[]

Optionaltype

type?: "reset" | "submit" | "button"

The type of the button when used in a form

Optionalvalue

value?: string

The value of the name property When submitted as part of a form

StaticformAssociated

formAssociated: boolean = true

Static InternalshadowRootOptions

shadowRootOptions: ShadowRootInit = ...

Staticstyles

Protected_handleClick

blur

click

focus

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