import {Testimonial, TestimonialGroup} from '@primer/react-brand'Examples
Default
Without avatars
Testimonial variants
TestimonialGroup supports all available Testimonial variants. Always use the same variant. Do not mix them.
Localization
Provide complete phrases through labels so translations can control word order and punctuation. An explicit aria-label overrides labels.carousel.
Component props
| Name | Type | Default | Description |
|---|---|---|---|
children | ReactNode | Direct Testimonial children. | |
defaultActiveIndex | number | 0 | Initial testimonial: 0 for the first, 1 for the second. |
onChange | (activeIndex: number) => void | Called after selection changes; the first index is 0. | |
labels | object | English labels | Accessible control labels and slide announcements. |
aria-label | string | labels.carousel | Accessible name override for the carousel. |
className | string | Custom root class. | |
id | string | Custom root ID. | |
ref | React.Ref<HTMLDivElement> | Ref to the root element. |
Labels
Provide partial overrides through labels. Unspecified fields keep their English defaults.
| Name | Default | Description |
|---|---|---|
carousel | 'Testimonials' | Carousel name when aria-label is omitted. |
controlsPrev | 'Previous testimonial' | Previous control label. |
controlsNext | 'Next testimonial' | Next control label. |
controlsNavigation | '{carousel} navigation' | Accessible name for the pagination controls. |
carouselRoleDescription | 'carousel' | Localized carousel role description. |
slideRoleDescription | 'slide' | Localized slide role description. |
indicator | 'Go to testimonial {current}' | Complete item selector label. |
slide | 'Testimonial {current} of {total}' | Complete slide label. |
announcement | 'Testimonial {current} of {total}: {author}' | Complete announcement with an author. |
Templates use simple placeholder replacement, not ICU message syntax. Select translated templates and plural forms through your application’s localization system.
| Placeholder | Available in | Value |
|---|---|---|
{carousel} | controlsNavigation | The resolved carousel name, including an explicit aria-label override. |
{current} | indicator, slide, announcement | One-based testimonial position. |
{total} | indicator, slide, announcement | Total number of testimonials. |
{author} | announcement | The selected testimonial’s plain-text Testimonial.Name. |
When the selected testimonial has no nonempty plain-text name, its complete slide phrase is announced instead. Unknown placeholders remain unchanged. Testimonial content is not translated automatically.
Animation timing
Override these CSS custom properties on TestimonialGroup or an ancestor to customize the fades. Use valid CSS durations such as 350ms or 0.7s.
| Token | Default | Description |
|---|---|---|
--brand-TestimonialGroup-fadeInDuration | 475ms | Duration of the incoming fade. |
--brand-TestimonialGroup-fadeOutDuration | 250ms | Duration of the outgoing fade. |
Slide changes wait for the rendered fades, including their stagger delays. Reduced-motion preferences still make navigation immediate. Spacing and avatar geometry are not component-specific token overrides.