Buttons

Button styles are located in base/buttons.css, include just buttons with @slate base/buttons.

:root {
    --btn-radius: .4rem;
    --btn-font-weight: 500;
    --btn-font-size: 1em;
    --btn-font-size-s: calc(var(--btn-font-size) - 0.2em);
    --btn-font-size-m: calc(var(--btn-font-size) + 0.2em);
    --btn-font-size-l: calc(var(--btn-font-size) + 0.4em);
    --btn-padding-x: var(--space-m);
    --btn-padding-y: var(--space-xs);
    --btn-shadow: none;
    --btn-shadow-hover: none;
    --btn-border-default: 1px solid var(--color-gray-lighter);
}

Buttons come in a few variants with sizing variants.

Variants

.btn .btn–primary .btn–accent .btn–subtle

Sizes

.btn .btn–l .btn–m .btn–s

Icons

Some Icons

States

Disabled

.btn–disabled

Block

.btn–block