Skip to main content

How to declare a element selector variant on component root element?

buttonThe selector you want to insert.componentThe element you want to style

Option 1​

+component('.btn')
  +register
    +variant('button')

  +default
    display: inline-flex

  +variant('button')
    cursor: pointer




.btn {
  display: inline-flex;
}

button.btn {
  cursor: pointer;
}

More info: +variant, +default, +register, +component

Option 2 - via alias and multiple elements​

+component('.btn')
  +register
    +variant('{clickable}', 'a', 'button', 'input')

  +default
    display: inline-flex
    font-size: 1.25em

  +variant('{clickable}')
    cursor: pointer



.btn {
  display: inline-flex;
  font-size: 1.25em;
}

a.btn, button.btn, input.btn {
  cursor: pointer;
}

More info: +variant, +default, +register, +component, separator +___