Live example
Properties
Accordion group
|
Name |
Values |
Default |
|---|---|---|
|
headingComponent |
ComponentType|String |
Heading4 |
|
children |
ReactNode |
|
|
... |
JSX.IntrinsicElements["div"] |
|
|
inline |
DEPRECATED |
|
Accordion
|
Name |
Values |
Default |
|---|---|---|
|
title (required) |
ReactNode |
|
|
children |
ReactNode |
|
|
expanded |
boolean |
false |
|
onToggle(expanded) => null |
Function |
|
|
titleSemanticComponent |
'h1' | 'h2' | 'h3' | 'h4' |
|
|
variant |
'default' | 'brand' |
'default' |
|
... |
JSX.IntrinsicElements["div"] |
|
|
inline |
DEPRECATED |
|
Native Properties
Accordion group
|
Name |
Values |
Default |
|---|---|---|
|
headingComponent |
ComponentType<any> |
Heading4 |
|
children |
ReactNode |
|
Accordion
|
Name |
Values |
Default |
|---|---|---|
|
title (required) |
string |
|
|
expanded |
boolean |
|
|
onToggle(expanded) => null |
CallableFunction |
|
|
variant |
'default' | 'brand' |
'default' |
|
testId |
string |
|
|
children |
ReactNode |
|
|
first |
boolean |
|
|
last |
boolean |
|
|
inline |
DEPRECATED |
|
Composition
- Heading
- Button
- Border
|
Tokens |
|
|---|---|
|
Text color |
color.brand.brand |
|
Icon color |
color.surface.onsurface |
|
Button background color |
color.surface.borderdim |
|
Border color |
color.surface.border |
|
Expanded panel background color |
color.surface.bright |
|
Padding |
space-200 space-300 space-500 |
|
Text font weight |
font.family.bold font.family.book |
|
Text font size |
font.size.md font.size.xl |
|
Text line height |
font.lineheight.md font.lineheight.xl |
|
Border radius |
border.radius.md |
|
border width |
border.width.sm |