Name
The main header above is the canonical name of the component. Give a one or two sentence description of the component here.
Accessibility
Heading
Design guidance
When and how to use this
Describe use cases that show when someone might choose to use this component in a design. If specific variants of the component you are documenting map to specific use cases, give examples here.
When to consider something else
Describe cases where someone might think of using this component, but shouldn't. Are there alternative components to use instead? Note those here.
Figma
Describe how to use your component in Figma. Be sure to indicate which shared library contains your component, and give a brief description of variants and component attributes that Figma users can work with.
React
Describe the basics of using this component in React. If the component has
variants, note which one is the default. If there are specific props and
associated behaviors that React developers might want to know about up front,
indicate them here. If this component composes a Chakra one, indicate what
Chakra component is composed. Below the description, create a jsx live block
so folks can play with the component in real time.
| Prop | Description |
|---|---|
propName | Prop description. Use this table to name and describe key props on this component. Examples for Badge follow. |
colorScheme | Sets the background and text color of the Badge |
variant | Sets the overall visual appearance. The brand variant is only for use on the marketing site |
Bootstrap
Describe the basics of using this component in environments that use our
Bootstrap theme. Be sure to call out cases where default Bootstrap classes or
behaviors are modified or extended. Below the description, create an html live
block so folks can play with the markup and classes in real time.
| Class | Background color | Text color |
|---|---|---|
.class-name | foo 500 | Use this table to describe key Bootstrap classes the component uses. If these classes relate to tokens, as in the example below, create more columns to indicate these. |
.bg-primary | primary 600 | neutral 0 |
.bg-warning | warning 500 | neutral 700 (via .text-dark) |
.bg-danger | danger 500 | neutral 0 |
.bg-neutral | neutral 600 | neutral 0 |
.bg-success | success 500 | neutral 0 |
.bg-info (not recommended) | brand navy 400 | neutral 0 |
.bg-light (not recommended) | neutral 100 | neutral 700 (via .text-dark) |
.bg-dark (not recommended) | neutral 700 | neutral 0 |
Accessibility
Lorem ipsum