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

    Class ZetaTileButton

    A large, tappable button with an icon stacked above a label. Ideal for grid layouts, dashboards, or mobile interfaces where quick, visually distinct actions are needed.

    • Content shown on button; typically text.

    button - The button element

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

    https://design.zebra.com/web/storybook/?path=/story/components-buttons--tile-button

    Hierarchy

    • FlavoredInterface<this> & LitElement<this> & BaseButton<this>
      • ZetaTileButton
    Index

    Other

    constructor disabled flavor icon? internals name? shape size type? value? formAssociated shadowRootOptions styles _handleClick

    rendering

    render

    Other

    disabled: boolean
    flavor: "outline-subtle"
    icon?: ZetaIconName

    Main icon of button. Full list of icons can be found at Zeta Icons.

    internals: ElementInternals
    name?: string

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

    shape: TileButtonShape = "rounded"

    Whether the component is sharp or rounded. This will change the border radius and icon font.

    Possible values are:

    • sharp: No border radius, uses "zeta-icons-sharp"
    • rounded: Minimal border radius, uses "zeta-icons-round"
    "rounded"
    size: "small" | "medium" | "large"
    type?: "reset" | "submit" | "button"

    The type of the button when used in a form

    value?: string

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

    formAssociated: boolean = true
    shadowRootOptions: ShadowRootInit = ...

    Protected_handleClick

    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