Skip to content

Button ​


View Source 

Usage ​

css
@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 

Examples ​

Basic ​

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

Flat ​

html
<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 ​

html
<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 ​

html
<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 ​

html
<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 ​

html
<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

html
<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 ​

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

Large ​

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

Wide ​

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

Square ​

html
<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 ​

html
<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 ​

html
<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 ​

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

Active ​

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

Disabled ​

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

Custom ​

html
<button class="ui-btn">Button</button>
css
.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

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

Group ​

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

html
<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>

Released under the MIT License.