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
Examples
Default
Small
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>