Name

The main header above is the canonical name of the component. Give a one or two sentence description of the component here.

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.

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.