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-pure p-button-tile p-canvas ๐Ÿงชp-carousel p-checkbox p-crest p-display ๐Ÿšซ p-divider p-drilldown ๐Ÿงชp-drilldown-item ๐Ÿงชp-drilldown-link ๐Ÿงชp-fieldset p-flag p-flyout p-heading 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-tile p-link-tile-product ๐Ÿงชp-modal p-model-signature p-multi-select p-multi-select-option p-optgroup p-pagination p-pin-code p-popover p-radio-group p-radio-group-option p-scroller p-segmented-control p-segmented-control-item p-select p-select-option 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-list p-text-list-item p-textarea p-toast p-wordmark isDelegatingFocusโœ…โœ…โœ…โœ…โœ…โœ…โœ…โœ…โœ…โœ…โœ…โœ…โœ…โœ…โœ…โœ…โœ…โœ…โœ…โœ…โœ…โœ…โœ…โœ…โœ…โœ…โœ…โœ…โœ…โœ…โœ…โœ…โœ…โœ…propsopen
alignMarker
background
compact
size ๐Ÿšซ๐Ÿ› 
heading ๐Ÿšซ
headingTag ๐Ÿšซ
sticky ๐Ÿงช
open
heading
headingTag
description
position ๐Ÿ› 
state
dismissButton
type
name
value
disabled
loading
variant
icon
iconSource
hideLabel ๐Ÿ› 
compact ๐Ÿ› 
aria
form
type
name
value
disabled
loading
size ๐Ÿ› 
color
icon
iconSource
underline
active
hideLabel ๐Ÿ› 
alignLabel ๐Ÿ› 
stretch ๐Ÿ› 
aria
form
size ๐Ÿ› 
weight ๐Ÿ› 
aspectRatio ๐Ÿ› 
label
description
align
gradient
compact ๐Ÿ› 
type
disabled
loading
icon
iconSource
aria
sidebarStartOpen
sidebarEndOpen
background
heading
headingSize
description
alignHeader
alignControls
rewind
width
slidesPerPage ๐Ÿ› 
pagination ๐Ÿ› 
aria
intl
activeSlideIndex
skipLinkTarget
focusOnCenterSlide
gradient
trimSpace
name
required
disabled
indeterminate
checked
form
value
label
state
message
hideLabel ๐Ÿ› 
loading ๐Ÿงช
compact
href
target
aria
tag
size ๐Ÿ› 
align
color
ellipsis
color
direction ๐Ÿ› 
open
activeIdentifier
aria
label
identifier
primary
secondary
cascade
href
active
target
download
rel
aria
label
labelSize
required
state
message
aria
name
size ๐Ÿ› 
aria
open
position
disableBackdropClick
background
backdrop
footerBehavior
aria
tag
size ๐Ÿ› 
weight
align
color
hyphens
ellipsis
name
source
color
size ๐Ÿ› 
aria
heading
headingTag
description
state
dismissButton
actionLabel
actionLoading
actionIcon
label
step
description
compact
name
value
autoComplete
readOnly
form
max
min
disabled
required
loading ๐Ÿงช
state
message
hideLabel ๐Ÿ› 
label
description
compact
name
value
autoComplete
readOnly
form
maxLength
minLength
placeholder
disabled
required
loading ๐Ÿงช
state
indicator
message
hideLabel ๐Ÿ› 
multiple
pattern
label
step
description
compact
name
value
autoComplete
readOnly
form
max
min
disabled
required
loading ๐Ÿงช
state
message
hideLabel ๐Ÿ› 
label
step
description
compact
name
value
autoComplete
readOnly
form
max
min
placeholder
disabled
required
loading ๐Ÿงช
state
message
hideLabel ๐Ÿ› 
controls
label
description
compact
name
value
autoComplete
readOnly
form
maxLength
minLength
placeholder
disabled
required
loading ๐Ÿงช
state
message
hideLabel ๐Ÿ› 
toggle
label
description
compact
name
value
autoComplete
clear
indicator
readOnly
form
maxLength
minLength
placeholder
disabled
required
loading ๐Ÿงช
state
message
hideLabel ๐Ÿ› 
label
description
compact
name
value
autoComplete
readOnly
form
maxLength
minLength
placeholder
disabled
required
loading ๐Ÿงช
state
indicator
message
hideLabel ๐Ÿ› 
pattern
label
spellCheck
description
compact
name
value
autoComplete
readOnly
form
maxLength
minLength
placeholder
disabled
required
loading ๐Ÿงช
state
message
hideLabel ๐Ÿ› 
counter
label
step
description
compact
name
value
autoComplete
readOnly
form
max
min
disabled
required
loading ๐Ÿงช
state
message
hideLabel ๐Ÿ› 
label
description
compact
name
value
autoComplete
readOnly
form
maxLength
minLength
placeholder
disabled
required
loading ๐Ÿงช
state
indicator
message
hideLabel ๐Ÿ› 
pattern
label
step
description
compact
name
value
autoComplete
readOnly
form
max
min
disabled
required
loading ๐Ÿงช
state
message
hideLabel ๐Ÿ› 
variant
icon
iconSource
href
target
download
rel
hideLabel ๐Ÿ› 
compact ๐Ÿ› 
aria
alignLabel ๐Ÿ› 
stretch ๐Ÿ› 
size ๐Ÿ› 
color
icon
iconSource
underline
href
active
hideLabel ๐Ÿ› 
target
download
rel
aria
size ๐Ÿ› 
weight ๐Ÿ› 
aspectRatio ๐Ÿ› 
label
description
align
gradient
compact ๐Ÿ› 
href
target
download
rel
aria
heading
price
priceOriginal
description
likeButton
liked
href
aspectRatio ๐Ÿ› 
target
rel
open
dismissButton
disableBackdropClick
backdrop
background
fullscreen ๐Ÿ› 
aria
model
safeZone
fetchPriority
lazy
size
color
label
description
name
value
state
message
hideLabel ๐Ÿ› 
disabled
required
dropdownDirection
compact
form
value
disabled
label
disabled
totalItemsCount
itemsPerPage
activePage
showLastPage
intl
label
description
name
length
hideLabel ๐Ÿ› 
state
disabled
loading
required
message
type
value
compact
form
direction
description
aria
label
description
compact
direction ๐Ÿ› 
name
value
form
disabled
required
loading ๐Ÿงช
state
message
hideLabel ๐Ÿ› 
value
label
disabled
loading ๐Ÿงช
scrollbar
compact
aria
sticky ๐Ÿงช
alignScrollIndicator ๐Ÿšซ
scrollToPosition ๐Ÿšซ
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
form
value
disabled
open
dismissButton
disableBackdropClick
background
aria
color
size ๐Ÿ› 
aria
size ๐Ÿ› 
state
disabled
alignLabel ๐Ÿ› 
hideLabel ๐Ÿ› 
stretch ๐Ÿ› 
checked
disabled
loading
compact
caption
compact
layout
sticky ๐Ÿงช
multiline
sort
hideLabel
multiline
size ๐Ÿ› 
activeTabIndex
background
compact
weight ๐Ÿšซ
activeTabIndex
background
size ๐Ÿ› 
compact
weight ๐Ÿšซ
label
variant
icon
iconSource
compact
label
aria
compact
tag
size ๐Ÿ› 
weight
align
color
hyphens
ellipsis
type
label
description
compact
name
value
state
message
hideLabel ๐Ÿ› 
counter
placeholder
required
disabled
maxLength
minLength
form
rows
autoComplete
spellCheck
wrap
resize
readOnly
size
href
target
aria
requiredPropsopen
label
description
identifier
open
name
name
name
name
name
name
name
name
name
name
name
label
description
href
heading
price
open
name
value
totalItemsCount
itemsPerPage
name
value
name
open
label
name
eventNamesupdate
dismiss
sidebarStartUpdate
sidebarEndDismiss
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
dismiss
motionVisibleEnd
motionHiddenEnd
blur
change
toggle
update
blur
change
blur
change
blur
change
blur
change
toggle
dismiss
motionVisibleEnd
motionHiddenEnd
update
update
update
update
update
change
blur
input
namedSlotssummary
summary-before
summary-after
heading ๐Ÿšซ
heading
description
header
footer
title
header-start
header-end
footer
sidebar-start
sidebar-end
sidebar-end-header
background
heading
description
controls
label
label-after
message
button
header
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
anchor
header
header
footer
label
label-after
description
selected
options-status
message
filter
label
label-after
description
message
button
label
label-after
description
message
label
label-after
label
label-after
description
message
label
label-after
description
selected
options-status
message
filter
header
caption
label
label-after
description
message
nestedComponentsp-button
p-spinner
p-icon
p-spinner
p-icon
p-button
p-button
p-crest
p-wordmark
p-link-pure
p-button-pure
p-spinner
p-icon
p-button-pure
p-button
p-button-pure
p-icon
p-button
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-link
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-icon
p-icon
p-input-search
p-icon
p-button
p-scroller
p-icon
p-spinner
p-scroller
p-icon
p-tabs-bar
p-scroller
p-icon
p-icon
p-icon
p-toast-item
Global settingsColor SchemeAll color tokens use the light-dark() CSS function. Set the theme via the CSS color-scheme property: light for light mode, dark for dark mode, or light dark to follow the user's system preference.LightDarkLight DarkDirectionThe 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%