Button

View Source 

Usage

@import "winduum/src/ui/btn/index.css" layer(components);

Variants

• default 
• interactive 

Tokens

• bordered
• muted
• raised
• ghosted
• gradient
• gradient-bordered
• sm
• lg
• wide
• square
• circle
• loading
• hover-fill

Props

• default-props 
• interactive-props 
• loading-props 

Installation

Follow instructions for individual framework usage below

• winduum 
• winduum-vue 
• winduum-react 

Examples

Basic

html

<button class="ui-btn">Button</button>
<button class="ui-btn rounded-full">Button</button>

vue

<script setup lang="ts">
    import { UiBtn } from '@/components/ui/btn'
</script>

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

jsx

import { UiBtn } from "@/components/ui/btn"

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

Flat

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

Bordered

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

Muted

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

Raised

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

Ghosted

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

Gradient

You can create gradient buttons with TailwindCSS gradient classes

<button class="ui-btn gradient-bordered hover-fill focus:!outline-purple-600/30 bg-gradient-to-br from-purple-600 to-blue-500">Button</button>
<button class="ui-btn gradient focus:!outline-purple-600 bg-gradient-to-br from-purple-600 to-blue-500">Button</button>

Small

<button class="ui-btn sm">Button</button>

Large

<button class="ui-btn lg">Button</button>

Wide

<button class="ui-btn wide">Button</button>
<button class="ui-btn wide lg w-full">Button</button>

Square

<button class="ui-btn square">1</button>
<button class="ui-btn square outline">2</button>
<button class="ui-btn 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="ui-btn circle">1</button>
<button class="ui-btn circle bordered">2</button>
<button class="ui-btn 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="ui-btn 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="ui-btn bordered">
    Button
    <svg>
        <use href="#icon-adjustments-vertical"></use>
    </svg>
</button>
<button class="ui-btn 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="ui-btn loading">
    Button
</button>
<button class="ui-btn muted loading">
    Button
</button>
<button class="ui-btn bordered loading">
    Button
</button>

Active

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

Disabled

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

Custom

<button class="ui-btn">Button</button>

.ui-btn {
    --ui-btn-height: 4rem;
    --ui-btn-py: 1rem;
    --ui-btn-px: 1rem;
    --ui-btn-border-radius: 0;
    --ui-btn-font-size: 1.15rem;
    --ui-btn-font-weight: 700;
    --ui-btn-bg: yellow;
    --ui-btn-color: #333;
    --ui-btn-hover-opacity: 0.4;
    --ui-btn-focus-opacity: 0.8;
}

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

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

Group

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

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