Accordion Table of Contents

• Props
• Events
• Slots
• CSS Variables

Propertiestype BreakpointCustomizable<T> = { base: T; xs?: T; s?: T; m?: T; l?: T; xl?: T; xxl?: T; };PropertyAttributeDescriptionTypeDefaultalignMarker align-markerAligns the marker within the summary section.type AccordionAlignMarker =
'start'
'end''end'background backgroundDefines the background color. Use frosted only on images, videos or gradients.type AccordionBackground =
'canvas'
'surface'
'frosted'
'none''none'compact compactDisplays the accordion in compact mode.booleanundefinedheading 🚫headingdeprecated Will be removed in the next major release. Use the summary slot instead. Sets the heading text within the summary section.stringundefinedheadingTag 🚫heading-tagdeprecated Will be removed in the next major release. Use the summary slot instead. Sets the heading tag for proper semantic structure within the page.type AccordionHeadingTag =
'h1'
'h2'
'h3'
'h4'
'h5'
'h6''h2'open openControls whether the accordion is open or closed.booleanundefinedsize 🚫🛠sizedeprecated Will be removed in the next major release. Use the summary slot instead. Controls the heading size in the summary section (only applies when using the heading prop or heading slot).type AccordionSize =
'small'
'medium'
BreakpointCustomizable<AccordionSize>'small'sticky 🧪stickyexperimental Makes the summary section sticky at the top while scrolling. Only works with background="canvas" or background="surface". Not compatible with summary-before or summary-after slots.booleanundefinedEventsEventDescriptionTypeupdate Emitted when the accordion state changes.type AccordionUpdateEventDetail = {
  open: boolean;
}
CustomEvent<AccordionUpdateEventDetail>SlotsSlotDescriptionisRequiredaltPropallowedTagNames<slot name="summary"> Content for the accordion's summary section. Clicking toggles the accordion open and closed.<slot name="summary-before"> Content or interactive elements placed before the accordion's summary section.<slot name="summary-after"> Content or interactive elements placed after the accordion's summary section.<slot name="heading"> 🚫Content for the accordion's heading section. Clicking toggles the accordion open and closed.<slot> Main content displayed when the accordion is expanded.CSS VariablesCSS VariableDescriptiondefaultValue--p-accordion-summary-top Controls the sticky top position when `sticky` is enabled.0px--p-accordion-px Horizontal padding of the accordion.16px--p-accordion-py Vertical padding of the accordion.16px