Porsche Design System

Button

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

aria

Sets ARIA attributes on the button to improve accessibility for screen readers.

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

undefined

compact 🛠

compact

Reduces the button's height and padding for denser layouts. Supports responsive breakpoint values.

boolean
BreakpointCustomizable<boolean>

false

disabled

Disables the button, preventing all interaction and blocking events.

boolean

false

form

Associates the button with a form element by its ID, so it can submit or reset that form even when placed outside of it.

string

undefined

hideLabel 🛠

hide-label

Hides the visible label while keeping it accessible to screen readers. Supports responsive breakpoint values.

boolean
BreakpointCustomizable<boolean>

false

icon

Sets the icon displayed inside the button. Use none to show no icon.

type ButtonIcon =
'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'
'copy'
'country-road'
'coupe'
'cubic-capacity'
'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'
'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, used instead of the built-in icon set.

string

undefined

loading

Disables the button and replaces its content with a loading spinner to indicate an ongoing operation.

boolean

false

name

Sets the name submitted with the form data when this button triggers form submission.

string

undefined

type

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

type ButtonType =
'button'
'submit'
'reset'

'submit'

value

Sets the value submitted with the form data when this button triggers form submission, paired with name.

string

undefined

variant

Sets the visual style variant of the button (e.g. primary, secondary, tertiary).

type ButtonVariant =
'primary'
'secondary'

'primary'

Slots

Slot

Description

isRequired

altProp

allowedTagNames

<slot>

Default slot for the button label.