Porsche Design System
You are currently viewing an earlier release of the Porsche Design System.Switch to the latest Porsche Design System documentation.
SearchNavigate to GitHub repository of Porsche Design SystemOpen sidebar
Introduction Following page shows an overview of all available and deprecated props, slots and events of the Porsche Design System components.


🛠 = breakpointCustomizable
🚫 = deprecated
🧪 = experimental
Show all prop values
p-accordion p-banner p-button p-button-group 🚫 p-button-pure p-button-tile p-canvas 🧪p-carousel p-checkbox p-checkbox-wrapper 🚫 p-content-wrapper 🚫 p-crest p-display p-divider p-drilldown 🧪p-drilldown-item 🧪p-drilldown-link 🧪p-fieldset p-fieldset-wrapper 🚫 p-flag p-flex 🚫 p-flex-item 🚫 p-flyout p-grid 🚫 p-grid-item 🚫 p-heading p-headline 🚫 p-icon p-inline-notification p-input-date p-input-email p-input-month p-input-number p-input-password p-input-search p-input-tel p-input-text p-input-time p-input-url p-input-week p-link p-link-pure p-link-social 🚫 p-link-tile p-link-tile-model-signature p-link-tile-product 🧪p-marque 🚫 p-modal p-model-signature p-multi-select p-multi-select-option p-optgroup p-pagination p-pin-code p-popover p-radio-button-wrapper 🚫 p-radio-group p-radio-group-option p-scroller p-segmented-control p-segmented-control-item p-select p-select-option p-select-wrapper 🚫 p-sheet p-spinner p-stepper-horizontal p-stepper-horizontal-item p-switch p-table p-table-body p-table-cell p-table-head p-table-head-cell p-table-head-row p-table-row p-tabs p-tabs-bar p-tabs-item p-tag p-tag-dismissible p-text p-text-field-wrapper 🚫 p-text-list p-text-list-item p-textarea p-textarea-wrapper 🚫 p-toast p-wordmark isDelegatingFocus✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅isThemeable✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅propssize 🛠
theme
heading
headingTag
tag 🚫
open
compact
sticky 🧪
open
heading
headingTag
description
state
dismissButton
persistent 🚫
width 🚫
theme
type
name
value
disabled
loading
variant
icon
iconSource
hideLabel 🛠
compact 🛠
theme
aria
form
direction 🛠
type
name
value
disabled
loading
size 🛠
weight 🚫
icon
iconSource
underline
active
hideLabel 🛠
alignLabel 🛠
stretch 🛠
theme
aria
form
size 🛠
weight 🛠
background
aspectRatio 🛠
label
description
align
gradient
compact 🛠
type
disabled
loading
icon
iconSource
aria
sidebarStartOpen
sidebarEndOpen
theme
heading
headingSize
description
alignHeader
alignControls
rewind
wrapContent 🚫
width
slidesPerPage 🛠
disablePagination 🚫🛠
pagination 🛠
aria
intl
theme
activeSlideIndex
skipLinkTarget
focusOnCenterSlide
gradientColor
trimSpace
name
required
disabled
indeterminate
checked
form
value
label
state
message
hideLabel 🛠
loading 🧪
compact
theme
label
state
message
hideLabel 🛠
loading 🧪
theme
width
backgroundColor 🚫
theme 🚫
href
target
aria
tag
size 🛠
align
color
ellipsis
theme
color
orientation 🚫🛠
direction 🛠
theme
open
activeIdentifier
aria
theme
label
identifier
primary
secondary
cascade
href
active
target
download
rel
aria
label
labelSize
required
state
message
theme
aria
label
labelSize
required
state
message
theme
name
size
aria
inline 🛠
wrap 🛠
direction 🛠
justifyContent 🛠
alignItems 🛠
alignContent 🛠
width 🛠
offset 🛠
alignSelf 🛠
grow 🛠
shrink 🛠
flex 🛠
open
position
disableBackdropClick
backdrop
footerBehavior
theme
aria
direction 🛠
wrap 🛠
gutter 🚫🛠
size 🛠
offset 🛠
tag
size 🛠
align
color
ellipsis
theme
variant 🛠
tag
align
color
ellipsis
theme
name
source
color
size
lazy 🚫
theme
aria
heading
headingTag
description
state
dismissButton
persistent 🚫
actionLabel
actionLoading
actionIcon
theme
label
step
description
compact
name
value
autoComplete
readOnly
form
max
min
disabled
required
loading 🧪
state
message
hideLabel 🛠
theme
label
description
compact
name
value
autoComplete
readOnly
form
maxLength
minLength
placeholder
disabled
required
loading 🧪
state
indicator
message
hideLabel 🛠
theme
multiple
pattern
label
step
description
compact
name
value
autoComplete
readOnly
form
max
min
disabled
required
loading 🧪
state
message
hideLabel 🛠
theme
label
step
description
compact
name
value
autoComplete
readOnly
form
max
min
placeholder
disabled
required
loading 🧪
state
message
hideLabel 🛠
theme
controls
label
description
compact
name
value
autoComplete
readOnly
form
maxLength
minLength
placeholder
disabled
required
loading 🧪
state
message
hideLabel 🛠
toggle
theme
label
description
compact
name
value
autoComplete
clear
indicator
readOnly
form
maxLength
minLength
placeholder
disabled
required
loading 🧪
state
message
hideLabel 🛠
theme
label
description
compact
name
value
autoComplete
readOnly
form
maxLength
minLength
placeholder
disabled
required
loading 🧪
state
indicator
message
hideLabel 🛠
theme
pattern
label
spellCheck
description
compact
name
value
autoComplete
readOnly
form
maxLength
minLength
placeholder
disabled
required
loading 🧪
state
message
hideLabel 🛠
theme
counter
label
step
description
compact
name
value
autoComplete
readOnly
form
max
min
disabled
required
loading 🧪
state
message
hideLabel 🛠
theme
label
description
compact
name
value
autoComplete
readOnly
form
maxLength
minLength
placeholder
disabled
required
loading 🧪
state
indicator
message
hideLabel 🛠
theme
pattern
label
step
description
compact
name
value
autoComplete
readOnly
form
max
min
disabled
required
loading 🧪
state
message
hideLabel 🛠
theme
variant
icon
iconSource
href
target
download
rel
hideLabel 🛠
compact 🛠
theme
aria
alignLabel 🛠
stretch 🛠
size 🛠
weight 🚫
icon
iconSource
underline
href
active
hideLabel 🛠
theme
target
download
rel
aria
icon
iconSource
href
target
rel
hideLabel 🛠
compact
theme
size 🛠
weight 🛠
background
aspectRatio 🛠
label
description
align
gradient
compact 🛠
href
target
download
rel
aria
model
weight 🛠
aspectRatio 🛠
heading
description
linkDirection 🛠
headingTag
heading
price
priceOriginal
description
likeButton
liked
href
aspectRatio 🛠
target
rel
theme
trademark
variant
size
href
target
aria
open
disableCloseButton 🚫
dismissButton
disableBackdropClick
heading 🚫
backdrop
fullscreen 🛠
aria
theme
model
safeZone
fetchPriority
lazy
size
color
theme
label
description
name
value
state
message
hideLabel 🛠
disabled
required
dropdownDirection
compact
theme
form
value
disabled
label
disabled
totalItemsCount
itemsPerPage
activePage
maxNumberOfPageLinks 🚫
showLastPage
allyLabel 🚫
allyLabelPrev 🚫
allyLabelPage 🚫
allyLabelNext 🚫
intl
theme
label
description
name
length
hideLabel 🛠
state
disabled
loading
required
message
type
value
compact
theme
form
direction
description
aria
theme
label
state
message
hideLabel 🛠
loading 🧪
theme
label
description
compact
direction 🛠
name
value
form
disabled
required
loading 🧪
state
message
hideLabel 🛠
theme
value
label
disabled
loading 🧪
gradientColorScheme 🚫
gradientColor 🚫
scrollToPosition
scrollIndicatorPosition 🚫
alignScrollIndicator
theme
scrollbar
aria
backgroundColor 🚫
theme
label
description
value
name
compact
state
required
message
hideLabel 🛠
columns 🛠
form
disabled
value
disabled
label
icon
iconSource
aria
label
description
name
value
state
message
hideLabel 🛠
disabled
required
dropdownDirection
filter
compact
theme
form
value
disabled
label
description
state
message
hideLabel 🛠
filter
theme
dropdownDirection
native
open
dismissButton
disableBackdropClick
aria
theme
size 🛠
theme
aria
size 🛠
theme
state
disabled
alignLabel 🛠
hideLabel 🛠
stretch 🛠
checked
disabled
loading
compact
theme
caption
compact
layout
theme
multiline
sort
hideLabel
multiline
size 🛠
weight
theme
gradientColorScheme 🚫
gradientColor 🚫
activeTabIndex
size 🛠
weight
theme
gradientColorScheme 🚫
gradientColor 🚫
activeTabIndex
label
theme
color
icon
iconSource
compact
color
theme
label
aria
compact
tag
size 🛠
weight
align
color
ellipsis
theme
label
unit
unitPosition
description
state
message
hideLabel 🛠
showCharacterCount 🚫
showCounter
actionIcon
actionLoading
submitButton
showPasswordToggle 🧪
theme
listType 🚫
orderType 🚫
type
theme
label
description
compact
name
value
state
message
hideLabel 🛠
counter
placeholder
required
disabled
maxLength
minLength
form
rows
autoComplete
spellCheck
wrap
resize
readOnly
theme
label
description
state
message
hideLabel 🛠
showCharacterCount 🚫
showCounter
theme
theme
size
theme
href
target
aria
requiredPropsopen
label
description
identifier
open
name
name
name
name
name
name
name
name
name
name
name
label
description
href
heading
heading
price
open
name
value
totalItemsCount
itemsPerPage
name
value
name
open
label
name
eventNamesaccordionChange 🚫
update
dismiss
sidebarStartUpdate
sidebarEndDismiss
carouselChange 🚫
update
update
change
blur
dismiss
update
dismiss
motionVisibleEnd
motionHiddenEnd
dismiss
action
change
blur
input
change
blur
input
change
blur
input
change
blur
input
change
blur
input
change
blur
input
change
blur
input
change
blur
input
change
blur
input
change
blur
input
change
blur
input
like
close 🚫
dismiss
motionVisibleEnd
motionHiddenEnd
blur
change
toggle
update 🚫
pageChange 🚫
update
blur
change
update 🚫
blur
change
segmentedControlChange 🚫
blur
change
update 🚫
blur
change
toggle
update 🚫
dismiss
motionVisibleEnd
motionHiddenEnd
stepChange 🚫
update
switchChange 🚫
update
sortingChange 🚫
update
tabChange 🚫
update
tabChange 🚫
update
action
change
blur
input
namedSlotsheading
heading
title 🚫
description
header
footer
title
header-start
header-end
footer
sidebar-start
sidebar-end
sidebar-end-header
background
heading
description
controls
label
label-after
message
label
message
button
header
label
message
label
message
header
footer
sub-footer
heading
label
label-after
description
message
start
end
label
label-after
description
message
start
end
label
label-after
description
message
start
end
label
label-after
description
message
start
end
label
label-after
description
message
start
end
label
label-after
description
message
start
end
label
label-after
description
message
start
end
label
label-after
description
message
start
end
label
label-after
description
message
start
end
label
label-after
description
message
start
end
label
label-after
description
message
start
end
header
footer
header
primary
secondary
anchor
header
heading 🚫
header
footer
label
label-after
description
selected
options-status
message
filter
label
label-after
description
message
button
label
message
label
label-after
description
message
label
label-after
label
label-after
description
message
label
label-after
description
selected
options-status
message
filter
label
description
message
header
caption
label
description
message
label
label-after
description
message
label
description
message
nestedComponentsp-icon
p-inline-notification
p-spinner
p-icon
p-spinner
p-icon
p-button
p-button-pure
p-button
p-crest
p-wordmark
p-flyout
p-link-pure
p-button-pure
p-spinner
p-icon
p-spinner
p-icon
p-button-pure
p-button
p-button-pure
p-icon
p-icon
p-button
p-icon
p-button-pure
p-button
p-button-pure
p-icon
p-button-pure
p-button-pure
p-button-pure
p-icon
p-button-pure
p-icon
p-button-pure
p-icon
p-button-pure
p-icon
p-icon
p-icon
p-link
p-link-pure
p-model-signature
p-button-pure
p-button
p-button-pure
p-icon
p-input-search
p-icon
p-spinner
p-icon
p-icon
p-spinner
p-icon
p-spinner
p-icon
p-spinner
p-button
p-icon
p-icon
p-icon
p-input-search
p-icon
p-icon
p-select-wrapper-dropdown
p-button
p-scroller
p-icon
p-spinner
p-scroller
p-icon
p-tabs-bar
p-scroller
p-icon
p-icon
p-button-pure
p-icon
p-icon
p-icon
p-toast-item
Global settingsThemeChanges the theme of the application and any Porsche Design System component. It's possible to choose between forced theme light and dark. It's also possible to use auto, which applies light or dark theme depending on the operating system settings automatically.LightDarkAuto (sync with operating system)DirectionThe dir global attribute in HTML changes the direction of text and other content within an element. It's most often used on the <html> tag to set the entire page's direction, which is crucial for supporting languages that are written from right to left (RTL), such as Arabic and Hebrew. For example, using <html dir="rtl"> makes the entire page display from right to left, adjusting the layout and text flow accordingly.LTR (left-to-right)RTL (right-to-left)Text ZoomTo ensure accessibility and comply with WCAG 2.2 AA standards, it is mandatory for web content to support text resizing up to at least 200% without loss of content or functionality. Using relative units like rem is a best practice for achieving this, as they allow the text to scale uniformly based on the user's browser settings.100%130%150%200%