Porsche Design SystemSearchNavigate 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-flex ๐Ÿšซ p-flex-item ๐Ÿšซ p-flyout p-grid ๐Ÿšซ p-grid-item ๐Ÿšซ p-heading p-headline ๐Ÿšซ p-icon p-inline-notification p-input-number p-input-password 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-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
label
labelSize
required
state
message
theme
inline ๐Ÿ› 
wrap ๐Ÿ› 
direction ๐Ÿ› 
justifyContent ๐Ÿ› 
alignItems ๐Ÿ› 
alignContent ๐Ÿ› 
width ๐Ÿ› 
offset ๐Ÿ› 
alignSelf ๐Ÿ› 
grow ๐Ÿ› 
shrink ๐Ÿ› 
flex ๐Ÿ› 
open
position
disableBackdropClick
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
placeholder
disabled
required
state
message
hideLabel ๐Ÿ› 
theme
controls
label
description
compact
name
value
autoComplete
readOnly
form
maxLength
minLength
placeholder
disabled
required
state
message
hideLabel ๐Ÿ› 
toggle
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
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
theme
form
direction
description
aria
theme
label
state
message
hideLabel ๐Ÿ› 
loading ๐Ÿงช
theme
gradientColorScheme ๐Ÿšซ
gradientColor
scrollToPosition
scrollIndicatorPosition ๐Ÿšซ
alignScrollIndicator
theme
scrollbar
aria
backgroundColor ๐Ÿšซ
theme
value
name
columns ๐Ÿ› 
form
disabled
value
disabled
label
icon
iconSource
aria
label
description
name
value
state
message
hideLabel ๐Ÿ› 
disabled
required
dropdownDirection
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
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
name
value
state
message
hideLabel ๐Ÿ› 
showCounter
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
label
description
href
heading
heading
price
open
name
value
totalItemsCount
itemsPerPage
value
name
open
label
name
eventNamesaccordionChange ๐Ÿšซ
update
dismiss
sidebarStartUpdate
sidebarEndDismiss
carouselChange ๐Ÿšซ
update
update
blur
dismiss
update
dismiss
motionVisibleEnd
motionHiddenEnd
dismiss
action
change
blur
input
change
blur
input
like
close ๐Ÿšซ
dismiss
motionVisibleEnd
motionHiddenEnd
update
pageChange ๐Ÿšซ
update
update
segmentedControlChange ๐Ÿšซ
update
update
dismiss
motionVisibleEnd
motionHiddenEnd
stepChange ๐Ÿšซ
update
switchChange ๐Ÿšซ
update
sortingChange ๐Ÿšซ
update
tabChange ๐Ÿšซ
update
tabChange ๐Ÿšซ
update
action
change
blur
input
namedSlotsheading
heading
title ๐Ÿšซ
description
header
title
header-start
header-end
footer
sidebar-start
sidebar-end
sidebar-end-header
background
heading
description
controls
label
message
label
message
button
header
label
message
label
message
header
footer
sub-footer
heading
label
description
message
start
end
label
description
message
start
end
header
header
primary
secondary
anchor
header
heading ๐Ÿšซ
header
footer
label
description
message
label
description
message
label
message
label
description
message
label
description
message
header
caption
label
description
message
label
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-button-pure
p-icon
p-icon
p-icon
p-link
p-link-pure
p-model-signature
p-button-pure
p-button
p-icon
p-button-pure
p-icon
p-spinner
p-icon
p-icon
p-spinner
p-icon
p-button
p-icon
p-icon
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)DirectionChanges the direction of HTML elements, mostly used on<html> tag to support languages which are read from right to left like e.g. Arabic.LTR (left-to-right)RTL (right-to-left)AutoText ZoomChanges the text size and values with unit rem or em relatively. This setting can be defined in browser settings for any website or by an application itself on<html> tag. To achieve WCAG 2.2 AA compliance it's obligatory to support text zoom up to at least 200%.100%130%150%200%