Buttons

Style buttons and links with variants and sizes.

Variants and sizes

data-variant picks the visual style, data-size the size. Any variant combines with any size.

Attribute	Values
`data-variant`	`"filled"` (default), `"tinted"`, `"outlined"`, `"plain"`
`data-size`	`"small"`, `"medium"` (default), `"large"`

Button variants

Show editor

<div class="stack-h gap-m">
  <button class="v-button" data-variant="filled">Filled</button>
  <button class="v-button" data-variant="tinted">Tinted</button>
  <button class="v-button" data-variant="outlined">Outlined</button>
  <button class="v-button" data-variant="plain">Plain</button>
</div>

Button sizes

Show editor

<div class="stack-h gap-m">
  <button class="v-button" data-size="small">Small</button>
  <button class="v-button">Medium</button>
  <button class="v-button" data-size="large">Large</button>
</div>

Color

In Varde, buttons get their color from a <color-mode palette="...">. Because color is inherited, there's no special attribute for coloring buttons.

Show editor

<div class="stack-v gap-xs">
  <div class="stack-h gap-xs">
    <button class="v-button">Filled</button>
    <button class="v-button" data-variant="tinted">Tinted</button>
    <button class="v-button" data-variant="outlined">Outlined</button>
    <button class="v-button" data-variant="plain">Plain</button>
  </div>

  <color-mode class="stack-h gap-xs" palette="periwinkle">
    <button class="v-button">Filled</button>
    <button class="v-button" data-variant="tinted">Tinted</button>
    <button class="v-button" data-variant="outlined">Outlined</button>
    <button class="v-button" data-variant="plain">Plain</button>
  </color-mode>

  <color-mode class="stack-h gap-xs" palette="coral">
    <button class="v-button">Filled</button>
    <button class="v-button" data-variant="tinted">Tinted</button>
    <button class="v-button" data-variant="outlined">Outlined</button>
    <button class="v-button" data-variant="plain">Plain</button>
  </color-mode>
  <color-mode class="stack-h gap-xs" palette="purple">
    <button class="v-button">Filled</button>
    <button class="v-button" data-variant="tinted">Tinted</button>
    <button class="v-button" data-variant="outlined">Outlined</button>
    <button class="v-button" data-variant="plain">Plain</button>
  </color-mode>

  <color-mode class="stack-h gap-xs" palette="green">
    <button class="v-button">Filled</button>
    <button class="v-button" data-variant="tinted">Tinted</button>
    <button class="v-button" data-variant="outlined">Outlined</button>
    <button class="v-button" data-variant="plain">Plain</button>
  </color-mode>

  <color-mode class="stack-h gap-xs" palette="yellow">
    <button class="v-button">Filled</button>
    <button class="v-button" data-variant="tinted">Tinted</button>
    <button class="v-button" data-variant="outlined">Outlined</button>
    <button class="v-button" data-variant="plain">Plain</button>
  </color-mode>
</div>

For inverted palettes, add inverted to <color-mode> and place the buttons on a dark surface such as surface-dyed:

Show editor

<color-mode
  inverted
  class="surface-dyed stack-h gap-xs p-xs"
  palette="periwinkle"
>
  <button class="v-button">Filled</button>
  <button class="v-button" data-variant="tinted">Tinted</button>
  <button class="v-button" data-variant="outlined">Outlined</button>
  <button class="v-button" data-variant="plain">Plain</button>
</color-mode>

Shapes

Utility classes combine with .v-button to adjust shape, padding, and other details.

And remember, friends don't let friends make icon buttons without aria-label.

Show editor

<div class="stack-h items-start gap-xs">
  <button class="v-button p-0 aspect-square" data-size="small" aria-label="Add">
    <span class="v-icon" data-v-icon="plus"></span>
  </button>
  <button class="v-button p-0 aspect-square" aria-label="Add">
    <span class="v-icon" data-v-icon="plus"></span>
  </button>
  <button class="v-button p-0 aspect-square" data-size="large" aria-label="Add">
    <span class="v-icon" data-v-icon="plus"></span>
  </button>

  <button
    class="v-button p-0 aspect-square br-circle"
    data-size="small"
    aria-label="Add"
  >
    <span class="v-icon" data-v-icon="plus"></span>
  </button>
  <button class="v-button p-0 aspect-square br-circle" aria-label="Add">
    <span class="v-icon" data-v-icon="plus"></span>
  </button>
  <button
    class="v-button p-0 aspect-square br-circle"
    data-size="large"
    aria-label="Add"
  >
    <span class="v-icon" data-v-icon="plus"></span>
  </button>
</div>

Icons first or last

Show editor

<div class="stack-h gap-xs">
  <button class="v-button" data-variant="outlined">
    <span class="v-icon" data-v-icon="chevron-left"></span> Filter
  </button>
  <button class="v-button" data-variant="outlined">
    Filter <span class="v-icon" data-v-icon="chevron-down"></span>
  </button>
  <button class="v-button" data-variant="outlined">
    <span class="v-icon" data-v-icon="chevron-left"></span> Filter
    <span class="v-icon" data-v-icon="chevron-right"></span>
  </button>
</div>

Do note: Icons inside buttons MUST inherits color. If you're using inline SVGS, then use currentColor.

Pill shaped button

Just add br-pill to v-button and you're done.

Show editor

<button class="v-button br-pill" data-variant="filled">Smaller pill</button>
<button class="v-button br-pill" data-variant="tinted">Smaller pill</button>
<button class="v-button br-pill" data-variant="outlined">Smaller pill</button>

Loading states

A .v-spinner inside a button renders a loading state. It inherits the button's color and size.

Show editor

<div class="stack-h gap-xs mb-xs">
  <button class="v-button">
    <span class="v-spinner"></span>
    Saving…
  </button>
  <button class="v-button" data-variant="outlined">
    <span class="v-spinner"></span>
    Saving…
  </button>
  <button class="v-button" data-variant="tinted">
    <span class="v-spinner"></span>
    Saving…
  </button>
</div>
<color-mode palette="periwinkle" class="stack-h gap-xs">
  <button class="v-button">
    <span class="v-spinner"></span>
    Saving…
  </button>
  <button class="v-button" data-variant="outlined">
    <span class="v-spinner"></span>
    Saving…
  </button>
  <button class="v-button" data-variant="tinted">
    <span class="v-spinner"></span>
    Saving…
  </button>
</color-mode>

Niceness

To get some more visual hierarachy, make the primary action mroe prominent by add some padding and a color-mode.

Show editor

<div class="stack-h gap-xs">
  <color-mode palette="periwinkle">
    <button class="v-button px-l">Save changes</button>
  </color-mode>
  <button class="v-button" data-variant="tinted">Cancel</button>
</div>