COMPONENTS

Buttons

Native actions use the inherited primary accent by default. Set data-variant on a parent for shared semantic colours, or on an action for a local exception. Keep buttons for actions and anchors for navigation.

Usage

Markup: button, action inputs; a.button for destinations

Behaviour: Local action attributes override inherited values and legacy classes; data-appearance remains badge/alert-only.

data-variant accepts primary, success, warning, danger and neutral. It applies to native buttons, button/submit/reset inputs and .button links. Other form controls do not acquire action colours, and navigation toggles keep their neutral menu styling.
Existing secondary, danger and warning classes remain supported as local choices over inherited variants. A valid data-variant placed directly on an action takes precedence over those classes. An unsupported value leaves the nearest valid inherited variant in effect, with a local legacy class still taking priority.
Outline and ghost are presentation classes that can combine with data-variant. data-appearance still applies only to badges and alerts. Secondary remains a class; it is not an accepted data-variant value.
Shared theme, material, accent, shape, size, border, fill, depth and motion continue to apply. Glass and decorative edges consume the action's resolved semantic colours. Native disabled prevents activation; an anchor cannot be disabled with the disabled attribute.

Component API and styling module · Inherited appearance settings

Button variants

Use the shared semantic vocabulary. No identifying class is needed on native buttons.

<div class="row">
  <button type="button">Primary</button>
  <button type="button" data-variant="success">Confirm</button>
  <button type="button" data-variant="warning">Review warning</button>
  <button type="button" data-variant="danger">Delete</button>
  <button type="button" data-variant="neutral">Neutral</button>
</div>

Parent defaults and local exceptions

The button and badge share the parent's meaning. The delete action overrides only its variant.

Approved

Success: Your changes have been saved.

<section class="stack" data-variant="success" data-shape="rounded">
  <div class="row">
    <button type="button">Approve</button>
    <span class="badge">Approved</span>
    <button type="button" data-variant="danger">Delete</button>
  </div>
  <div class="alert">Success: Your changes have been saved.</div>
</section>

Semantic colour with outline or ghost

Presentation classes remain optional. data-appearance is not a button setting.

<div class="row" data-variant="success">
  <button type="button">Confirm</button>
  <button type="button" class="outline">Outline confirm</button>
  <button type="button" class="ghost">Quiet confirm</button>
  <button type="button" class="outline" data-variant="danger">Outline delete</button>
</div>

Existing classes and precedence

Local semantic classes override the parent. An explicit action attribute wins when both APIs are present.

<div class="row" data-variant="success">
  <button type="button">Inherited success</button>
  <button type="button" class="danger">Existing danger class</button>
  <button type="button" class="secondary">Existing secondary class</button>
  <button type="button" class="danger" data-variant="primary">Explicit primary override</button>
</div>

Links and native action inputs

Only native action input types receive the semantic button treatment. Destination links keep their .button hook.

Read the guide

<section class="row" data-variant="success">
  <a class="button" href="/RevaCSS/guide/">Read the guide</a>
  <input type="button" value="Confirm">
  <button type="button" disabled>Unavailable</button>
</section>

Glass and semantic edge colours

The parent supplies the variant and material. A local primary value resets the semantic colour while retaining glass.

<section class="row" data-material="glass" data-theme="dark"
         data-variant="success" data-shape="pill">
  <button type="button" data-edge="gradient">Confirm</button>
  <button type="button" data-variant="primary">Continue</button>
  <button type="button" data-variant="danger" data-material="solid">Solid delete</button>
</section>

Actions in light and dark

Primary and secondary actions inherit the same accent. Theme changes their palette; shape, size, borders, depth and motion remain independently configurable. These examples use solid buttons; the optional glass stylesheet enables translucent button material.

Light

Dark

<div class="grid" data-accent="violet" data-shape="pill">
  <section class="card" data-theme="light">
    <h3>Light</h3>
    <div class="row">
      <button type="button">Continue</button>
      <button type="button" class="secondary">Go back</button>
    </div>
  </section>
  <section class="card" data-theme="dark">
    <h3>Dark</h3>
    <div class="row">
      <button type="button">Continue</button>
      <button type="button" class="secondary">Go back</button>
    </div>
  </section>
</div>

Sizes and disabled state

data-size can set inherited control sizes on html or a section; a value on a control overrides them. Native disabled prevents activation.

<div class="row">
  <button type="button" data-size="small">Small</button>
  <button type="button" data-size="medium">Medium</button>
  <button type="button" data-size="large">Large</button>
  <button type="button" disabled>Unavailable</button>
</div>

Links styled as actions

Use .button on a real destination link. Anchors do not support the disabled attribute.

Back to page content

<a class="button" href="#main">Back to page content</a>

Local button configuration

Shared attributes can be placed directly on a button or inherited from a surrounding section.

<button type="button" data-accent="violet" data-shape="pill" data-fill="solid" data-motion="none">Violet action</button>

Gradient edges and motion

Plain is the default. Gradient is stationary; shine makes one 800ms sweep on hover or keyboard focus; animated turns slowly. Use continuous animation sparingly for a selected main action. Edges follow the action colour and shape, independently of fill. Native input buttons retain regular borders.

<div class="row">
  <button type="button" data-edge="plain">Plain</button>
  <button type="button" data-edge="gradient">Gradient</button>
  <button type="button" data-edge="shine">Shine</button>
  <button type="button" data-edge="animated">Animated</button>
</div>

A shared edge with local exceptions

Set data-edge on html or a section to configure buttons, .button links and cards. A nearer plain value removes decoration. data-border none removes the gradient ring; data-motion none pauses it. Reduced motion keeps a static ring; higher contrast, forced colours and print remove decoration.

Shared stationary edge

Focused shine

<section data-edge="animated" data-shape="pill" data-accent="violet" data-motion="none">
  <article class="card">
    <h3>Shared stationary edge</h3>
    <div class="row">
      <button type="button">Inherited edge</button>
      <a class="button secondary" href="#main" data-edge="shine" data-motion="subtle">Focused shine</a>
      <button type="button" data-edge="plain">Plain exception</button>
      <button type="button" disabled>Unavailable</button>
    </div>
  </article>
</section>