Skip to content

Accent

Status: Stable
Storybook
GitHub

The Accent component helps emphasize content with ALL CAPS, but has restrictions.

  • Accent (default) is reserved for Buttons – do not use Accent (default) in any other context
  • Accent Small anchors blocks of content, highlights elements in a dense table of data, or singals navigation in specific contexts (i.e., eyebrows via ContentPageHeader or Tabs) – use sparingly
  • Limit to short strings of a few words; capitals have reduced legibility

Variants

Default

Emphasis
Open in Playroom

Small

Emphasis
Open in Playroom

Props

<Accent>

children

ReactNode

inline

boolean
By default `<Type>` is block-level (renders a <p> tag). If the inline prop is used, `<Type>` is inline (renders a <span> tag).

align

"center" | "left" | "right"
Text alignment.

size

"default" | "small"

component

ReactElement

ref

(instance: any) => void | RefObject<any>