Skip to content

Class and Style Bindings ​

Sprig supports ordinary HTML class attributes and reactive property bindings such as :class and :style in .sprig templates:

html
<template>
  <button :class="active() ? 'button button--active' : 'button'"
          :title="active() ? 'Active' : 'Inactive'">
    Toggle state
  </button>
</template>

Function-valued properties are tracked and updated by the DOM helper. Stylesheets can be global with <style> or component-scoped with <style scoped>. CSS Modules are not implemented; use native CSS classes. See Template Syntax.