Component Variants

Component variants allow you to create distinctly stylized versions of a component.

This is achieved by creating a Variant on the component itself, and then all elements within the component can be style-adjusted when that Variant is selected.

Example Use Cases

• A section component which head a heading, and a big slot for content. Variant can be used to control how the slot works, e.g flex vertical, grid 3 columns, and so on. This makes it easy to reuse that same section for diffrent layouts.

Useful Tips

You can only specify one variant per component, therefore it's most effective to make the components "small" and to use nesting and slots in order to create more complex arrangements.

For example, a modal component might consist of;

• The modal itself
• Sidebar content
• Main content
• Buttons

Variants allow you to make key decisions, like...

• Where the modal is positioned - center, bottom left, etc.
• Whether the button has an icon or not, or perhaps the background color of the button

‍

‍

‍