Use "Small", "Medium", "Large" and, in code, use `sm`, `md`, `lg`.
For additional sizing options: in code, use `xxs`, `xs`, `sm`, `md`, `lg`, `xl`, `xxl`.
To keep in mind
We use 3 primary Sizing options for most components: "Small", "Medium", "Large".
In code, sm, md, lg.
Some components only need 2 sizes, e.g. “Small” and “Medium”.
If a component has only one size, we refer to it by its name or “default”.
For additional sizing options, if absolutely necessary, you can use these 7 options: "Extra Extra Small", "Extra Small", "Small", "Medium", "Large", "Extra Large", and "Extra Extra Large".
In code, xxs, xs, sm, md, lg, xl, and xxl.
A component sizing option doesn’t mean it is necessarily fixed width or fluid width.
In some cases, we don’t specify a “size” but rather a minimum and maximum width and let the content determine what exact width is appropriate. For example, our modals have min and max widths instead of sizes.
For some components, the page, context, and content will likely dictate where breakpoints make sense. For example, a data table would vary depending on what data is present.
When to use
When the component has a particular layout at a particular size.
Use this component sizing with fixed width or fluid width components.
Let containers decide the exact size.
When not to use
For describing specific content such as body, heading, image, use those words instead of sizes (that is, don’t use “tall” to describe a heading when you could use “heading” or “square” to describe an image when you could use “image”)