Buttons

Interactive elements with various variants and states.

Buttons are intelligent, interactive elements styled with the @ds-button mixin. They use the same "Smart Mixin" syntax as surfaces, allowing responsive control over density, radius, and depth, with built-in state management.

.btn { @ds-button(contained primary) }

Interactive Playground

VariantToneDensity (Padding)2Radius2Shadow1

Force HoverForce ActiveForce Selected

.my-button {
  @ds-button(contained primary density(2) radius(2) shadow(1));
}

Resolved CSS Output for .my-button

.my-button {
  background-color: palette(primary-main);
  color: palette(primary-contrast);
  padding: density(2);
  border-radius: radius(2);
  border: none;
  box-shadow: shadow(1);

  &:hover {
    background-color: palette(primary-light);
  }

  &:active {
    transform: scale(0.98);
  }

  &.selected {
    box-shadow: inset 0 0 0 2px currentColor;
    font-weight: bold;
  }
}

Mixin Documentation

The @ds-button mixin is the primary primitive for interactive elements. It accepts a Variant (structure) and Tone (color), followed by optional granular tokens for Density (padding), Radius, and Shadow. It automatically generates Hover, Active, and Selected states.

Smart Parameters:

variant: Base style (contained, outlined, flat). Determines default borders/shadows.
tone: Applies semantic color palette. Handles contrast automatically.
density(N): Responsive padding (0-5). Scales automatically.
radius(N): Border radius (0-5). Defaults to system standard (2).
shadow(N): Box shadow depth (0-5). Defaults to 1 for contained, 0 for others.

Examples

@ds-button(contained primary)

@ds-button(outlined primary)

@ds-button(flat primary)

@ds-button(contained secondary)

@ds-button(outlined secondary)

@ds-button(contained success)

@ds-button(contained error)