FAQ - Primer

Ready to use


import {FAQ, FAQGroup} from '@primer/react-brand'

Examples

Grouped FAQs

Use FAQGroup to display multiple FAQ components together.

Use tabAttributes to add arbitrary attributes to the tabs. This can be useful for tracking analytics or adding custom attributes.

Toggle color customization

FAQ.Question toggle colors can be adjusted using one of the following approaches:

Override the global --brand-color-accent-primary CSS variable (recommended).
Use the toggleColor prop on FAQ.Question.

Available options for toggleColor are:

'default', 'blue', 'coral', 'green', 'gray', 'indigo', 'lemon', 'lime', 'orange', 'pink', 'purple', 'red', 'teal', 'yellow', 'blue-purple', 'green-blue', 'pink-blue', 'purple-red', 'red-orange'

See Storybook for all color options.

Component props

FAQ Required

Name	Type	Description
`className`	`string`	Sets a custom class
`id`	`string`	Sets a custom id
`ref`	`React.RefObject`	Forward a Ref to the underlying DOM node
`children`	`'FAQ.Heading'`, `'FAQ.Subheading'`, `'FAQ.Item'`	Root element for the FAQ component.

FAQ.Heading Required

Name	Type	Default	Description
`align`	`'start'`, `'center'`	`'center'`	Heading text alignment
`children`	`string`		Heading text
`className`	`string`		Heading custom class
`id`	`string`		Sets a custom id
`ref`	`React.RefObject`		Forward a Ref to the underlying DOM node
`size`	`'medium'`, `'large'`	`'medium'`	Heading text size
`as`	`'h1'`, `'h2'`, `'h3'`, `'h4'`, `'h5'`, `'h6'`		Applies the underlying HTML element
`toggleColor`	`'default'`, `'blue'`, `'coral'`, `'green'`, `'gray'`, `'indigo'`, `'lemon'`, `'lime'`, `'orange'`, `'pink'`, `'purple'`, `'red'`, `'teal'`, `'yellow'`, `'blue-purple'`, `'green-blue'`, `'pink-blue'`, `'purple-red'`, `'red-orange'`		Sets the accordion toggle color

FAQ.Subheading

Name	Type	Default	Description
`children`	`string`		Sub-heading text
`className`	`string`		Sub-heading custom class
`id`	`string`		Sets a custom id
`as`	`'h2'`, `'h3'`, `'h4'`, `'h5'`, `'h6'`	`'h3'`	Applies the underlying HTML element
`ref`	`React.RefObject`		Forward a Ref to the underlying DOM node

FAQ.Item

Name	Type	Default	Description
`open`	`boolean`	`false`	Sets answer visibility
`className`	`string`		Sets a custom class
`children`	`'FAQ.Question'`, `'FAQ.Answer'`		FAQ question and answer pair
`id`	`string`		Sets a custom id
`ref`	`React.RefObject`		Forward a Ref to the underlying DOM node

FAQ.Question

Name	Type	Default	Description
`className`	`string`		Sets a custom class on the root element
`children`	`string`		Question text
`id`	`string`		Sets a custom id
`as`	`'h2'`, `'h3'`, `'h4'`, `'h5'`, `'h6'`	`'h4'`	Applies the underlying HTML element
`ref`	`React.RefObject`		Forward a Ref to the underlying DOM node

FAQ.Answer

Name	Type	Description
`className`	`string`	Sets a custom class on the root element
`children`	`ReactElement`	`<p>` or `<Text>` components are recommended
`id`	`string`	Sets a custom id
`ref`	`React.RefObject`	Forward a Ref to the underlying DOM node

FAQGroup

Name	Type	Description
`className`	`string`	Sets a custom class
`id`	`string`	Sets a custom id
`ref`	`React.RefObject`	Forward a Ref to the underlying DOM node
`children`	`'FAQ'`, `'FAQGroup.Heading'`	Root element for the FAQGroup component.
`tabAttributes`	`(children: ReactElement, index: number) => Record<string, unknown>`	Spreads the returned attributes onto the tab that’s rendered by the FAQGroup.

FAQGroup.Heading

Name	Type	Default	Description
`as`	`'h1'`, `'h2'`, `'h3'`, `'h4'`, `'h5'`, `'h6'`		Applies the underlying HTML element

Forwards all the props from the Heading component, including size, and weight.