Variants

Variants define the visual style of a component by determining how its palette is applied. Each variant combines the active palette with a different treatment for the background, border, outline, and text to create distinct appearances while maintaining a consistent color system.

Use the variant-{value} class to apply a variant to a component.
Available variants include solid, outline, surface, subtle, ghost, link, and plain. Keep in mind that while you can apply any variant to any component, not every variant is appropriate for every use case. Some components are designed with a specific set of variants in mind and may produce a better user experience with those intended styles.

Primary

Neutral

Extra Palettes

If you also included the extra palettes:

/** main.css */
@import 'extraction-ui/palettes';

Accent

Success

Error

Info

Warning