Heading
Overview
When to use
- Define the main sections or titles within your application's content.
- Structure your page by visually differentiating key sections.
When to consider an alternative
t.b.d.
Component
Default
States
Pass the state prop to change the color of the heading component.
With sematic tag
By default Heading has an h1 tag. But you can change it by providing as prop with values from h1 to h6
Properties
Default
| Property | Type | Required | Default | Description |
|---|---|---|---|---|
| utilClassNames | String | false | - | |
| children | Node | false | - | |
| headingRef | Shape {
"current": "Any"
} | false | - | |
| tag | String | false | - | HTML Tag or React Component (e.g. div, span, etc) |
| state | Enum "default" │ "success" │ "error" │ "warning" │ "info" │ "muted" | false | - | Exported as Heading.States.error, etc. |