Skip to main content

Accordion

The Accordion component allows the user to show and hide sections of associated content on a page.

Properties

NameTypeDefaultDescription
actionsboolfalseIf enabled, displays the Accordion Action settings.
disabledboolfalseIf true, the component is disabled.
expandedcodeAllows the user to add additional code to control the expansion functionality of the component.

Style Attributes

NameTypeDefaultDescription
squareboolfalseIf true, disables rounded corners on the component.

Subcomponents

The Accordion component consists of several subcomponents that define various aspects of an accordion's content.

Accordion Summary

The Accordion Summary component provides a title for the content within the details section of the accordion and an expansion indicator to expand the accordion.

NameTypeDefaultDescription
expandIconnodedown arrowDefines the icon to display as the expand indicator.
marginstringThe margin space around the accordion summary content.
paddingstringThe padding space around the accordion summary content.
fontserif
sans-serif
monospaced
arial
arial black
verdana
times new roman
didot
georgia
american typewriter
courier
monaco
bradley hand
string
Defines the font face for the title.
sizestringDefines the size of the accordion summary component in pixels.
colorhref #ffffff
rgb 5,5,5
string
Defines the color of the accordion summary component.

Accordion Details

The Accordion Details component provides a surface to display additional information through other components, such as a Card, Typography or Text component.

NameTypeDefaultDescription
marginstringThe margin space around the accordion details content.
paddingstringThe padding space around the accordion details content.
fontserif
sans-serif
monospaced
arial
arial black
verdana
times new roman
didot
georgia
american typewriter
courier
monaco
bradley hand
string
Defines the font face for the detail text.
sizestringDefines the size of the accordion details component in pixels.
colorhref #ffffff
rgb 5,5,5
string
Defines the color of the accordion details component.

Accordion Actions

The Accordion Actions component allows for the placement of Button components to perform actions related to the accordion's function. By default, when the accordion actions are enabled, both the Cancel and OK buttons are added to the component.

NameTypeDefaultDescription
disableSpacingboolfalseIf true, removes additional margin spacing around the actions.
marginstringThe margin space around the accordion actions content.
paddingstringThe padding space around the accordion actions content.
fontserif
sans-serif
monospaced
arial
arial black
verdana
times new roman
didot
georgia
american typewriter
courier
monaco
bradley hand
string
Defines the font face for the actions component.
sizestringDefines the size of the accordion actions component in pixels.
colorhref #ffffff
rgb 5,5,5
string
Defines the color of the accordion actions component.

For more detail on the Accordion component, see the MUI developer docs.

on this page
Was this article useful?
89% of our users said this content was useful.