Button

Button component for triggering actions — works with button, a and input elements and comes in several variants and sizes.

View Source 

Installation

Follow instructions for individual framework usage below

• winduum 
• winduum-elements 
• winduum-stimulus 
• winduum-vue 
• winduum-react 

Styles

Variants

• default 
• interactive 

Props

• default 
• interactive 

Scripts

The Button script adds the ripple effect and keeps the loading spinner state in sync with data-loading.

Tokens

• bordered
• muted
• raised
• ghosted
• sm
• lg
• square
• circle
• fill
• spinner

Examples

Basic

winduum

<button class="x-button">Button</button>
<button class="x-button rounded-full">Button</button>

winduum-elements

<button class="x-button" is="x-button">Button</button>
<a class="x-button rounded-full" href="#" is="x-button-a">Button</a>

winduum-stimulus

<button class="x-button" data-controller="x-button">Button</button>
<a class="x-button rounded-full" href="#" data-controller="x-button">Button</a>

winduum-vue

<script setup lang="ts">
    import { Button } from '@/components/button'
</script>

<template>
    <Button>Button</Button>
    <Button class="rounded-full">Button</Button>
</template>

winduum-react

import { Button } from '@/components/button'

export function Example() {
    return (
        <>
            <Button>Button</Button>
            <Button className="rounded-full">Button</Button>
        </>
    )
}

Flat

<button class="x-button accent-primary">Primary</button>
<button class="x-button accent-main">Main</button>
<button class="x-button accent-success">Success</button>
<button class="x-button accent-error">Error</button>
<button class="x-button accent-warning">Warning</button>
<button class="x-button accent-info">Info</button>
<button class="x-button accent-dark">Dark</button>
<button class="x-button accent-light text-dark">Light</button>

Bordered

<button class="x-button bordered accent-primary">Primary</button>
<button class="x-button bordered accent-main">Main</button>
<button class="x-button bordered accent-success">Success</button>
<button class="x-button bordered accent-error">Error</button>
<button class="x-button bordered accent-warning">Warning</button>
<button class="x-button bordered accent-info">Info</button>
<button class="x-button bordered accent-dark">Dark</button>
<button class="x-button bordered accent-light">Light</button>

Muted

<button class="x-button muted accent-primary">Primary</button>
<button class="x-button muted accent-main">Main</button>
<button class="x-button muted accent-success">Success</button>
<button class="x-button muted accent-error">Error</button>
<button class="x-button muted accent-warning">Warning</button>
<button class="x-button muted accent-info">Info</button>
<button class="x-button muted accent-dark">Dark</button>
<button class="x-button muted accent-light">Light</button>

Raised

<button class="x-button raised accent-primary">Primary</button>
<button class="x-button raised accent-main">Main</button>
<button class="x-button raised accent-success">Success</button>
<button class="x-button raised accent-error">Error</button>
<button class="x-button raised accent-warning">Warning</button>
<button class="x-button raised accent-info">Info</button>
<button class="x-button raised accent-dark">Dark</button>
<button class="x-button raised accent-light text-dark">Light</button>

Ghosted

<button class="x-button ghosted accent-primary">Primary</button>
<button class="x-button ghosted accent-main">Main</button>
<button class="x-button ghosted accent-success">Success</button>
<button class="x-button ghosted accent-error">Error</button>
<button class="x-button ghosted accent-warning">Warning</button>
<button class="x-button ghosted accent-info">Info</button>
<button class="x-button ghosted accent-dark">Dark</button>
<button class="x-button ghosted accent-light">Light</button>

Small

<button class="x-button sm">Button</button>

Large

<button class="x-button lg">Button</button>

Square

<button class="x-button square">1</button>
<button class="x-button square outline">2</button>
<button class="x-button square muted">
    <svg fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" d="M6 13.5V3.75m0 9.75a1.5 1.5 0 010 3m0-3a1.5 1.5 0 000 3m0 3.75V16.5m12-3V3.75m0 9.75a1.5 1.5 0 010 3m0-3a1.5 1.5 0 000 3m0 3.75V16.5m-6-9V3.75m0 3.75a1.5 1.5 0 010 3m0-3a1.5 1.5 0 000 3m0 9.75V10.5" />
    </svg>
</button>

Circle

<button class="x-button circle">1</button>
<button class="x-button circle bordered">2</button>
<button class="x-button circle muted">
    <svg fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" d="M6 13.5V3.75m0 9.75a1.5 1.5 0 010 3m0-3a1.5 1.5 0 000 3m0 3.75V16.5m12-3V3.75m0 9.75a1.5 1.5 0 010 3m0-3a1.5 1.5 0 000 3m0 3.75V16.5m-6-9V3.75m0 3.75a1.5 1.5 0 010 3m0-3a1.5 1.5 0 000 3m0 9.75V10.5" />
    </svg>
</button>

Icon

<button class="x-button muted">
    <svg fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" d="M6 13.5V3.75m0 9.75a1.5 1.5 0 010 3m0-3a1.5 1.5 0 000 3m0 3.75V16.5m12-3V3.75m0 9.75a1.5 1.5 0 010 3m0-3a1.5 1.5 0 000 3m0 3.75V16.5m-6-9V3.75m0 3.75a1.5 1.5 0 010 3m0-3a1.5 1.5 0 000 3m0 9.75V10.5" />
    </svg>
    Button
</button>
<button class="x-button bordered">
    Button
    <svg>
        <use href="#icon-adjustments-vertical"></use>
    </svg>
</button>
<button class="x-button square">
    <svg>
        <use href="#icon-adjustments-vertical"></use>
    </svg>
</button>
<svg hidden>
    <symbol id="icon-adjustments-vertical" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" d="M6 13.5V3.75m0 9.75a1.5 1.5 0 010 3m0-3a1.5 1.5 0 000 3m0 3.75V16.5m12-3V3.75m0 9.75a1.5 1.5 0 010 3m0-3a1.5 1.5 0 000 3m0 3.75V16.5m-6-9V3.75m0 3.75a1.5 1.5 0 010 3m0-3a1.5 1.5 0 000 3m0 9.75V10.5" />
    </symbol>
</svg>

Loading

<button class="x-button" data-loading>
    Button
    <span class="spinner spinner-absolute"></span>
</button>
<button class="x-button muted" data-loading>
    Button
    <span class="spinner spinner-absolute"></span>
</button>
<button class="x-button bordered" data-loading>
    <span class="spinner spinner-circle"></span>
    Loading
</button>

Active

<button class="x-button active">
    Button
</button>
<button class="x-button muted active">
    Button
</button>
<button class="x-button bordered active">
    Button
</button>

Disabled

<button class="x-button" disabled>
    Button
</button>
<button class="x-button muted" disabled>
    Button
</button>
<button class="x-button bordered" disabled>
    Button
</button>

Custom

<button class="x-custom">Button</button>

.x-custom {
  --color-accent: yellow;
  --color-accent-foreground: #333;
  --x-button-block-size: 4rem;
  --x-button-padding-block: 1rem;
  --x-button-padding-inline: 1rem;
  --x-button-border-radius: 0;
  --x-button-font-size: 1.15rem;
  --x-button-font-weight: 700;
  --x-button-hover-opacity: 40%;
  --x-button-focus-opacity: 80%;
}

You can also extend the button with any TailwindCSS class to customize it

<button class="x-button bg-gray-200 text-dark">Button</button>

Group

You can group buttons into groups via x-group component.

<div class="x-group">
    <button class="x-button">Button</button>
    <button class="x-button">Button</button>
    <button class="x-button">Button</button>
</div>
<div class="x-group">
    <button class="x-button outline">Button</button>
    <button class="x-button outline">Button</button>
    <button class="x-button outline">Button</button>
</div>
<div class="x-group">
    <button class="x-button muted">Button</button>
    <button class="x-button muted">Button</button>
    <button class="x-button muted">Button</button>
</div>