Skip to main content

Tile Button

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.

https://www.figma.com/design/JesXQFLaPJLc1BdBM4sisI/%F0%9F%A6%93-ZDS-Zeta---Components?node-id=36355-10869&t=shLlA9L1VRy7S06l-4

Demo

zeta-web v0.11.0
Web Components

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.

Storybook

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

Slots

NameDescriptionType
defaultContent shown on button; typically text.text

Attributes

NameDescriptionTypeDefault
iconMain icon of button. Full list of icons can be found at https://design.zebra.com/iconsZeta Icons.ZetaIconName | undefined

Inherited Attributes

NameDescriptionTypeDefaultInherited From
flavorFlavor of component.Values:* primary - blue background.* positive - green background.* negative - red background.* outline - primary outline only.* outline-subtle - grey outline only.* text - primary text only.* inverse - black/white background. Note that this flavor is not supported in all components.'outline-subtle'"outline-subtle"Flavored
sizeSize of component'small' | 'medium' | 'large'"medium"BaseButton
shapeWhether 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"'sharp' | 'rounded' | 'full'"rounded"BaseButton
disabledBoolean for if component is disabled.This will apply disabled styles.booleanfalseBaseButton
tabIndexThe tab index of the component, used to determine the order in which elements receive focus when the user navigates through the document by pressing the Tab key.number0BaseButton
typeThe type of the button when used in a form"submit" | "reset" | "button" | undefinedundefinedBaseButton
nameName for the button, used if the button is in a form.string | undefinedundefinedBaseButton
valueThe value of the name property When submitted as part of a formstring | undefinedundefinedBaseButton