Caption
Overview
When to use
- Provide brief descriptive text associated with other UI elements like images or figures.
- Display additional information in a smaller and less prominent font size compared to body text.
- Add context or clarification to data visualizations or charts.
When to consider an alternative
t.b.d.
Component
Default
States
Pass the state prop to change the color of the caption component.
fontWeight
Set the fontWeight=Caption.FontWeight.medium to set the font weight of the caption to bold.
Properties
Default
| Property | Type | Required | Default | Description |
|---|---|---|---|---|
| utilClassNames | String | false | - | |
| children | Node | false | - | |
| captionRef | Shape {
"current": "Any"
} | false | - | |
| tag | String | false | - | HTML Tag or React Component (e.g. div, span, etc) |
| fontWeight | Enum 'normal' │ 'medium' | false | - | Exported as `Caption.FontWeights.medium` etc., fontWeight='medium' for bold |
| state | Enum "default" │ "success" │ "error" │ "warning" │ "info" │ "muted" | false | - | Exported as `Caption.States.error` etc. |