Button component


Button component with multiple styles, colors and sizes.

Basic usage 

import { WButton } from "vue-windi"

Basic 

<WButton>Primary</WButton>
<WButton loading>Loading</WButton>
<WButton disabled>Disabled</WButton>
<WButton pills>Primary pills</WButton>
<WButton variant="outline">Outline</WButton>
<WButton variant="link">Link</WButton>
<WButton circle> 
    <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M3 1a1 1 0 000 2h1.22l.305 1.222a.997.997 0 00.01.042l1.358 5.43-.893.892C3.74 11.846 4.632 14 6.414 14H15a1 1 0 000-2H6.414l1-1H14a1 1 0 00.894-.553l3-6A1 1 0 0017 3H6.28l-.31-1.243A1 1 0 005 1H3zM16 16.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM6.5 18a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"> </path></svg> 
</WButton>

Colors 

<WButton color="primary">Primary </WButton>
<WButton color="secondary">Secondary </WButton>
<WButton color="success">Success </WButton>
<WButton color="danger">Danger </WButton>
<WButton color="warning">Warning </WButton>

Outline 

<WButton color="primary" variant="outline">Primary </WButton>
<WButton color="secondary" variant="outline">Secondary </WButton>
<WButton color="success" variant="outline">Success </WButton>
<WButton color="danger" variant="outline">Danger </WButton>
<WButton color="warning" variant="outline">Warning </WButton>

Transparent 

<WButton color="primary" variant="transparent">Primary </WButton>
<WButton color="secondary" variant="transparent">Secondary </WButton>
<WButton color="success" variant="transparent">Success </WButton>
<WButton color="danger" variant="transparent">Danger </WButton>
<WButton color="warning" variant="transparent">Warning </WButton>

Pills 

<WButton color="primary" pills>Primary </WButton>
<WButton color="secondary" pills>Secondary </WButton>
<WButton color="success" pills>Success </WButton>
<WButton color="danger" pills>Danger </WButton>
<WButton color="warning" pills>Warning </WButton>

Sizes 

<WButton size="xs">Extra-small </WButton>
<WButton size="sm">Small </WButton>
<WButton>normal </WButton>
<WButton size="lg">Large </WButton>
<WButton size="xl">Extra-large </WButton>

Responsive 

<WButton size="sm" md="lg">Default(sm) md(lg)</WButton>
<WButton size="lg" md="xs">Default(lg) md(xs)</WButton>       
<WButton color="primary" variant="link">Primary </WButton>
<WButton color="secondary" variant="link">Secondary </WButton>
<WButton color="success" variant="link">Success </WButton>
<WButton color="danger" variant="link">Danger </WButton>
<WButton color="warning" variant="link">Warning </WButton>

Circle 

<WButton circle>
    <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M3 1a1 1 0 000 2h1.22l.305 1.222a.997.997 0 00.01.042l1.358 5.43-.893.892C3.74 11.846 4.632 14 6.414 14H15a1 1 0 000-2H6.414l1-1H14a1 1 0 00.894-.553l3-6A1 1 0 0017 3H6.28l-.31-1.243A1 1 0 005 1H3zM16 16.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM6.5 18a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"> </path></svg> 
</WButton>
<WButton circle variant="outline">
    <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M3 1a1 1 0 000 2h1.22l.305 1.222a.997.997 0 00.01.042l1.358 5.43-.893.892C3.74 11.846 4.632 14 6.414 14H15a1 1 0 000-2H6.414l1-1H14a1 1 0 00.894-.553l3-6A1 1 0 0017 3H6.28l-.31-1.243A1 1 0 005 1H3zM16 16.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM6.5 18a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"> </path></svg> 
</WButton>

Tag

Home Secondary 
<WButton tag="a" href="/" variant="link" >Home </WButton>
<WButton tag="RouterLink" to="/components/button">Secondary </WButton>