Skip to Content
🎉 Coral x Panda has been released 🎉 Read the Migration Guide
DocumentationAtomsAccordion

Accordion

This component allows users to hide or reveal content

Basic Usage

import { Accordion } from '@krakentech/coral';
 
<Accordion>Accordion content</Accordion>;
Accordion content

Properties

borderless

<Accordion borderless>Accordion content</Accordion>
Accordion content

disabled

<Accordion disabled>Accordion content</Accordion>
Accordion content

expanded

<Accordion expanded>Accordion content</Accordion>
Accordion content

headingLevel

<Accordion expanded headingLevel="h1">
    The title is rendered as an h1 not an h5
</Accordion>

The title is rendered as an h1 not an h5

Note: Inspect the heading element of the Accordion

padding

<Accordion padding="none">Accordion content</Accordion>
<Accordion padding="xsmall">Accordion content</Accordion>
<Accordion padding="small">Accordion content</Accordion>
<Accordion padding="medium">Accordion content</Accordion>
<Accordion padding="large">Accordion content</Accordion>
No padding
XSmall padding
Small padding
Medium padding
Large padding

theme

<Accordion theme="base900">Accordion content</Accordion>
<Accordion theme="base500">Accordion content</Accordion>
<Accordion theme="secondary900">Accordion content</Accordion>
Accordion content
Accordion content
Accordion content

title

<Accordion title="More information">Accordion content</Accordion>
Accordion content

Event Handlers

<Accordion onChange={(event, isExpanded) => {}}>Accordion content</Accordion>

Responsiveness

<Accordion theme={{ base: 'secondary900', md: 'base900' }}>...</Accordion>

Accordion content

Full API

NameTypeDefault
attributesAttributes

This prop can be used to pass HTML attributes directly to the component. We currently allow passing data-* and aria-* attributes and the id. However, you can pass anything else with a type hack if necessary since this object is despread in to the component, without filtering its content.

Example usage:

AttributesProps: {
  'id': 'close-button',
  'aria-label': 'Close button',
  'data-testid': 'close-button'
};
borderlessboolean

If true, the Accordion will not have a border.

false
titleReactNode

The title of the Accordion. If a string is passed, it will be rendered as a heading element. If a ReactNode is passed, it will be rendered as is.

undefined
headingLevel"h1" | "h2" | "h3" | "h4" | "h5" | "h6"

The heading level for the Accordion title. Only applies when the title prop is passed as a string.

'h5'
disabledboolean

If true, the component will be disabled and not respond to user interactions.

false
expandedboolean

If true, the component will be expanded by default on render.

false
paddingResponsiveVariant<"none" | "xsmall" | "small" | "medium" | "large">

How much padding to add between the Card edge and the content.

medium
onChange(event: SyntheticEvent<HTMLButtonElement, Event>, isExpanded: boolean) => void

Callback fired when the expand/collapse state is changed.

  • event The event source of the callback. Warning: This is a generic event not a change event.
  • isExpanded The expanded state of the accordion.
themeResponsiveVariant<"base900" | "base500" | "secondary900">

The colourway applied to this component.

base900
childrenReactNode

Design

Good to know

Choose an accordion when you need to reveal or hide content that might not need to be seen at a glance. An accordion allows you to display a header with related content initially hidden, helpful on what might already be a busy page.

How does it work?

When clicked on (or triggered by a keyboard interaction or screen reader), the heading will either reveal or hide related content.

What is the difference between dropdown and accordion?

The accordion will push down the content, while the dropdown lays over the content. Unlike a drop down the content is not editable in an accordion.

Component breakdown

  • Corner radius: 12px
  • Border: 2px
  • Fill colour: Hemocyanin or Siphon
  • Border colour: Ink & Voltage
  • Text colour: Ice
  • Title: Button Text
  • Body: Body 1 or Body 2
Last updated on
useHeaderHeightAlert