Testimonial

Use Testimonial to display a quote from a customer or user.
  • Experimental
  • Review pending by accessibility team
import {Testimonial} from '@primer/react-brand'

Examples

Default

A logo (or similar) visual can be provided as an alternative to avatars.

Alignment

Use align to alternate the text direction. Available options are start (default) and center

Layout

Testimonial will expand to fill the width of its parent by default.

Use Stack to help position multiple, adjacent Testimonials alongside one another.

Position

Pass additional content about the testimonial provider using position.

Component props

Testimonial Required

Testimonial passes contextual data to its child inputs, labels, validation messaging and more.

NameTypeDefaultDescription
children'Testimonial.Quote'
'Testimonial.Name'
'Testimonial.Logo'
'Testimonial.Avatar'
'React.ReactNode'
Valid child nodes
classNamestringSets a custom class
idstringSets a custom id
align'start'
'center'
startSet alignment of inner text
refReact.RefObjectForward a Ref to the underlying DOM node

Testimonial.Name Required

Testimonial.Name indicates the name of the person (or organisation) that provided the testimonial.

NameTypeDefaultDescription
childrenstringLabel text
classNamestringApplies a custom class
idstringSets a custom id
refReact.RefObjectForward a Ref to the underlying DOM node
positionstringOptional. Applies additional content adjancent to the primary text.

Testimonial.Avatar

Testimonial.Avatar represent users or organizations.

NameTypeDefaultDescription
childrenstringLabel text
classNamestringApplies a custom class
idstringSets a custom id
refReact.RefObjectForward a Ref to the underlying DOM node
srcstringRequired. A url to the user or organisations GitHub profile avatar
altstringRequired. Applied as alt text to the avatar.

Testimonial.Logo passes a visual that represents the users or organizations.

NameTypeDefaultDescription
children'SVGElement'
'HTMLImageElement'
Accepts <img> and <svg> HTML elements as children.
classNamestringApplies a custom class
idstringSets a custom id
refReact.RefObjectForward a Ref to the underlying DOM node