Component Variants

When building a Stylable component library or a Stylable application, it is useful to define several semantic “flavors” of some components, for example a Button component that represents cancel or a Gallery component for the main gallery instance.

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.
@namespace "project";
:import {
    -st-from: "./";
    -st-default: Button; 
.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:

@namespace "comp";
:import {
    -st-from: './';
    -st-named: cancelButton;
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;

Notice that in the case of the .cancelButton selector, we manually added the .root class to avoid overriding cancelButton outside of this scope