Button

View Source 

Usage

@import "winduum/src/components/button/index.css" layer(utilities);

Variants

• default 
• interactive 

Props

• default 
• interactive 

Tokens

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

Installation

Follow instructions for individual framework usage below

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

Examples

Basic

html

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

vue

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

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

jsx

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>

Custom Props

default

CSS property	Default value
--x-button-inline-size	initial
--x-button-block-size	2.25rem
--x-button-padding-block	0.375rem
--x-button-padding-inline	0.75rem
--x-button-border-radius	var(--radius, 0.75rem)
--x-button-font-family	initial
--x-button-font-size	var(--font-size-sm, 0.875rem)
--x-button-font-weight	var(--font-weight-medium, 500)
--x-button-letter-spacing	initial
--x-button-background-color-space	srgb
--x-button-background-color	var(--color-accent)
--x-button-background-color-opacity	100%
--x-button-background-color-mix	transparent
--x-button-color-space	srgb
--x-button-color	var(--color-accent-foreground)
--x-button-color-opacity	100%
--x-button-color-mix	transparent
--x-button-border-width	0px
--x-button-border-color-space	srgb
--x-button-border-color	var(--color-accent)
--x-button-border-color-opacity	100%
--x-button-border-color-mix	transparent
--x-button-outline-width	2px
--x-button-outline-color-space	srgb
--x-button-outline-color	transparent
--x-button-outline-color-opacity	100%
--x-button-outline-color-mix	transparent
--x-button-outline-offset	initial
--x-button-gap	var(--spacing-2, 0.5rem)

interactive

CSS property	Default value
--x-button-transition-property	var(--default-transition-property)
--x-button-timing-function	var(--transition-timing-function-in-out)
--x-button-transition-duration	var(--default-transition-duration)
--x-button-hover-background-color	var(--color-accent)
--x-button-hover-background-color-mix	var(--color-dark)
--x-button-hover-background-color-opacity	80%
--x-button-hover-border-color	var(--color-accent)
--x-button-hover-border-color-mix	transparent
--x-button-hover-border-color-opacity	100%
--x-button-hover-color	var(--color-accent-foreground)
--x-button-hover-color-mix	transparent
--x-button-hover-color-opacity	100%
--x-button-focus-outline-offset	2px
--x-button-focus-outline-color	var(--color-accent)
--x-button-focus-outline-color-opacity	50%
--x-button-active-background-color	var(--color-accent)
--x-button-active-background-color-mix	var(--color-dark)
--x-button-active-background-color-opacity	90%
--x-button-active-border-color	var(--color-accent)
--x-button-active-border-color-mix	transparent
--x-button-active-border-color-opacity	100%
--x-button-active-color	var(--color-accent-foreground)
--x-button-active-color-mix	transparent
--x-button-active-color-opacity	100%
--x-button-disabled-background-color	var(--color-accent)
--x-button-disabled-background-color-mix	transparent
--x-button-disabled-background-color-opacity	50%
--x-button-disabled-border-color	var(--color-accent)
--x-button-disabled-border-color-mix	transparent
--x-button-disabled-border-color-opacity	50%
--x-button-disabled-color	var(--color-accent-foreground)
--x-button-disabled-color-mix	transparent
--x-button-disabled-color-opacity	50%