Skip to main content

Component Variants

When building a component library or an application, it is useful to define several semantic "flavors" of some components, for example a Button component that represents cancel.

Defining a component variant

In your project's Stylable stylesheet used for the commonly used components in your project (usually named you:

  1. Import a component stylesheet.
  2. Define a CSS class with a descriptive name like cancelButton.
  3. Extend the component on the class you just defined.
@st-import Button from "./";

.cancelButton {
-st-extend: Button;
color: red;
border: 1px solid red;

Use component variants in components

A component Stylable stylesheet can use and extend component variants:
@st-import [cancelButton] from "./";

selector: .comp__root .project__cancelButton.button__root
js value: "project__cancelButton"
.root .cancelButton {
selector: .comp__cancel.project__cancelButton.button__root
js value: "comp__cancel project__cancelButton"
.cancel {
-st-extends: cancelButton;

For the .cancelButton selector, we manually added the .root class to avoid overriding cancelButton outside this scope.