On this page

Do/Don't

  • New
  • Not reviewed for accessibility
On this page

Use the Do and Dont components to provide good and bad examples within documentation.

Usage

Do, Dont and DoDontContainer are a shortcodes, meaning they are globally available in all .md and .mdx files. So you can use the Do, Dont, and DoDontContainer components in any .md or .mdx file without importing them.

Side-by-side

To create a side-by-side Do/Don't example, wrap the Do and Dont components with the DoDontContainer component:

Note: Caption text should describe the image and be able to stand on its own. The alt prop should be used if a more detailed description of the image is needed.

Stacked

The DoDontContainer component also accepts a stacked prop to create stacked Do/Don't examples:

Indented

Do and Dont components can also be indented to increase the clarity of the example message within the documentation: