Overview
The Accordion component provides an expandable and collapsible content area, perfect for FAQs, nested navigation, or progressive disclosure of information.
Basic Usage
import Accordion from '@newtonschool/grauity';
function MyComponent() {
return (
<Accordion title="Section Title">
<p>Content that can be expanded or collapsed</p>
</Accordion>
);
}
Title displayed in the accordion header.
Controls whether the accordion is expanded.
Callback function when the accordion is toggled.Signature: (expanded: boolean) => void
Element to display before the toggle icon in the header.
Background color of the accordion header.
contentBackgroundColor
string
default:"var(--bg-subtle-secondary-default, #f6f7f9)"
Background color of the accordion content area.
iconColor
string
default:"var(--text-emphasis-primary-default, #16191d)"
Color of the toggle icon.
iconSize
grauityIconSizeName
default:"16"
Size of the toggle icon.
Show/hide separator line between accordions.
Content to display when the accordion is expanded.
Additional CSS class names.
Additional inline CSS properties.
Controlled Accordion
import { useState } from 'react';
function MyComponent() {
const [isExpanded, setIsExpanded] = useState(false);
return (
<Accordion
title="Controlled Accordion"
expanded={isExpanded}
onToggle={(expanded) => setIsExpanded(expanded)}
>
<p>This accordion's state is controlled by the parent component</p>
</Accordion>
);
}
With Suffix Element
<Accordion
title="Accordion with Badge"
suffix={
<Chip variant="brand" size="small">
New
</Chip>
}
>
<p>Content with a suffix badge</p>
</Accordion>
Custom Colors
<Accordion
title="Custom Styled Accordion"
headerBackgroundColor="#e3f2fd"
contentBackgroundColor="#ffffff"
iconColor="#1976d2"
>
<p>Accordion with custom colors</p>
</Accordion>
Without Separator
<Accordion
title="No Separator"
showSeparator={false}
>
<p>This accordion has no separator line</p>
</Accordion>
Multiple Accordions
function FAQSection() {
return (
<div>
<Accordion title="What is Grauity?">
<p>Grauity is a React design system component library.</p>
</Accordion>
<Accordion title="How do I install it?">
<p>You can install Grauity using npm or yarn.</p>
</Accordion>
<Accordion title="Is it open source?">
<p>Yes, Grauity is open source.</p>
</Accordion>
</div>
);
}
With Complex Content
<Accordion title="Detailed Section">
<div style={{ padding: '16px' }}>
<NSTypography variant="heading-sb-h6">Subsection</NSTypography>
<NSTypography variant="paragraph-md-p3">
This accordion contains complex nested content.
</NSTypography>
<Button variant="primary" size="small">
Take Action
</Button>
</div>
</Accordion>