Porsche Design System

Button Tile

Table of Contents

Props
Slots

Properties

type BreakpointCustomizable<T> = {
  base: T;
  xs?: T;
  s?: T;
  m?: T;
  l?: T;
  xl?: T;
  xxl?: T;
};

Property

Attribute

Description

Type

Default

align

Controls the vertical placement of the description and button — top or bottom.

type ButtonTileAlign =
'top'
'bottom'

'bottom'

aria

Sets ARIA attributes on the tile's action button to improve accessibility for screen readers.

type ButtonTileAriaAttribute = {
  'aria-label'?: string;
  'aria-description'?: string;
  'aria-expanded'?: string;
  'aria-pressed'?: string;
  'aria-haspopup'?: string;
}

undefined

aspectRatio 🛠

aspect-ratio

Sets the width-to-height ratio of the tile media area. Supports responsive breakpoint values.

type ButtonTileAspectRatio =
'1/1'
'4/3'
'3/4'
'16/9'
'9/16'
'auto'
BreakpointCustomizable<ButtonTileAspectRatio>

'4/3'

compact 🛠

compact

Renders only the icon button without the full label. Supports responsive breakpoint values.

boolean
BreakpointCustomizable<boolean>

false

description

Sets the description text displayed in the tile's content area.

string

undefined

disabled

Disables the tile, preventing button interaction.

boolean

false

gradient

Shows a gradient overlay over the media slot to improve text legibility on bright images or videos.

boolean

false

icon

Sets the icon displayed in the tile's action button. Use none to show no icon.

type ButtonTileIcon =
'360'
'4-wheel-drive'
'accessibility'
'active-cabin-ventilation'
'add'
'adjust'
'aggregation'
'ai-3d-object'
'ai-code'
'ai-edit'
'ai-image'
'ai-scale'
'ai-sound'
'ai-spark'
'ai-spark-filled'
'ai-text'
'ai-video'
'arrow-compact-down'
'arrow-compact-left'
'arrow-compact-right'
'arrow-compact-up'
'arrow-double-down'
'arrow-double-left'
'arrow-double-right'
'arrow-double-up'
'arrow-down'
'arrow-down-left'
'arrow-down-right'
'arrow-first'
'arrow-head-down'
'arrow-head-left'
'arrow-head-right'
'arrow-head-up'
'arrow-last'
'arrow-left'
'arrow-right'
'arrow-up'
'arrow-up-left'
'arrow-up-right'
'arrows'
'attachment'
'augmented-reality'
'battery-empty'
'battery-empty-co2'
'battery-empty-fuel'
'battery-full'
'battery-half'
'battery-one-quarter'
'battery-three-quarters'
'bell'
'bookmark'
'bookmark-filled'
'brain'
'broadcast'
'cabriolet'
'calculator'
'calendar'
'camera'
'car'
'car-battery'
'card'
'charging-active'
'charging-network'
'charging-state'
'charging-station'
'chart'
'chat'
'check'
'city'
'climate'
'climate-control'
'clock'
'close'
'closed-caption'
'cloud'
'co2-class'
'co2-emission'
'color-picker'
'compare'
'compass'
'configurate'
'connect-services'
'copy'
'country-road'
'coupe'
'cubic-capacity'
'customer-support'
'cut'
'delete'
'disable'
'dislike'
'dislike-filled'
'document'
'door'
'download'
'drag'
'duration'
'ear'
'edit'
'email'
'error'
'error-filled'
'exclamation'
'exclamation-filled'
'external'
'fast-backward'
'fast-forward'
'file-csv'
'file-excel'
'filter'
'fingerprint'
'flag'
'flash'
'fuel-station'
'garage'
'genuine-parts'
'geo-localization'
'gift'
'globe'
'grid'
'grip'
'group'
'hand'
'heart'
'heart-filled'
'highway'
'highway-filled'
'history'
'home'
'horn'
'image'
'increase'
'information'
'information-filled'
'key'
'laptop'
'leaf'
'leather'
'light'
'like'
'like-filled'
'limousine'
'linked'
'list'
'locate'
'lock'
'lock-open'
'logo-apple-carplay'
'logo-apple-music'
'logo-apple-podcast'
'logo-baidu'
'logo-delicious'
'logo-digg'
'logo-facebook'
'logo-foursquare'
'logo-gmail'
'logo-google'
'logo-hatena'
'logo-instagram'
'logo-kaixin'
'logo-kakaotalk'
'logo-kununu'
'logo-linkedin'
'logo-naver'
'logo-pinterest'
'logo-qq'
'logo-qq-share'
'logo-reddit'
'logo-skyrock'
'logo-snapchat'
'logo-sohu'
'logo-spotify'
'logo-tecent'
'logo-telegram'
'logo-tiktok'
'logo-tumblr'
'logo-twitter'
'logo-viber'
'logo-vk'
'logo-wechat'
'logo-weibo'
'logo-whatsapp'
'logo-x'
'logo-xing'
'logo-yahoo'
'logo-youku'
'logo-youtube'
'logout'
'map'
'menu-dots-horizontal'
'menu-dots-vertical'
'menu-lines'
'microphone'
'minus'
'mobile'
'moon'
'new-chat'
'news'
'none'
'north-arrow'
'oil-can'
'online-search'
'parking-brake'
'parking-light'
'paste'
'pause'
'phone'
'pin'
'pin-filled'
'pivot'
'play'
'play-filled'
'plug'
'plus'
'preheating'
'price-tag'
'printer'
'purchase'
'push-pin'
'push-pin-off'
'qr'
'qr-off'
'question'
'question-filled'
'racing-flag'
'radar'
'radio'
'refresh'
'replay'
'reset'
'return'
'road'
'roof-closed'
'roof-open'
'route'
'rss'
'save'
'screen'
'search'
'seat'
'send'
'service-technician'
'share'
'shopping-bag'
'shopping-bag-filled'
'shopping-cart'
'shopping-cart-filled'
'shopping-cart-off'
'sidebar'
'sidelights'
'skip-backward'
'skip-forward'
'snowflake'
'sort'
'stack'
'star'
'star-filled'
'steering-wheel'
'stop'
'stopwatch'
'subtract'
'success'
'success-filled'
'sun'
'suv'
'switch'
'tablet'
'tachometer'
'theme'
'tire'
'trigger-finger'
'truck'
'turismo'
'unlinked'
'upload'
'user'
'user-filled'
'user-group'
'user-manual'
'video'
'view'
'view-off'
'volume-off'
'volume-up'
'warning'
'warning-filled'
'weather'
'weight'
'wifi'
'work'
'wrench'
'wrenches'
'zoom-in'
'zoom-out'

'none'

iconSource

icon-source

Sets a path to a custom SVG icon for the action button, used instead of the built-in icon set.

string

undefined

label

Sets the accessible label text of the action button rendered inside the tile.

string

undefined

loading

Disables the tile and shows a loading spinner to indicate an ongoing operation.

boolean

false

size 🛠

size

Sets the font size of the description text in the tile content area. Supports responsive breakpoint values.

type ButtonTileSize =
'medium'
'large'
'inherit'
BreakpointCustomizable<ButtonTileSize>

'medium'

type

Sets the button's HTML type — submit sends the form, reset clears it, button performs no default action.

type ButtonTileType =
'button'
'submit'
'reset'

'submit'

weight 🛠

weight

Sets the font weight of the description text in the tile content area. Supports responsive breakpoint values.

type ButtonTileWeight =
'regular'
'semi-bold'
BreakpointCustomizable<ButtonTileWeight>

'semi-bold'

Slots

Slot

Description

isRequired

altProp

allowedTagNames

<slot name="header">

Renders a header section above the content area.

<slot>

Default slot for the img or picture tag.

<slot name="footer">

Renders a footer section below the description.