Skip to content

Btn

The button / button component - used in forms or as part of navigation. The icons in button are placed using a component BtnIcon.

Props

color
Color from the Tailwind palette
type:String
default:white
values:primary, secondary, warning, info, success, danger
size
Button size
type:String
default:md
values:xs, sm, md, lg, xl
type
Type of Button
type:String
default:button
values:button, submit
rounded
Decides to round the button
type:Boolean
default:false
outline
Setting an alternative color arrangement with a clear border
type:Boolean
default:false
light
Setting an alternative color arrangement
type:Boolean
default:false
disabled
Allows you to deactivate button
type:Boolean
default:false
icononly
Leaves one default slot and sets it for the icon
type:Boolean
default:false
to
String or object for the link, the value turns the button to router-link
type:String, Object
default:null
text
Text button
type:String
default:''
full
Sets the button width to 100% of the available area
type:Boolean
default:false
reverse
Shifts the order of icon and text
type:Boolean
default:false

Slots

default
Space for icon or main text
fortext
Space for text

Examples

Standard, default buttons
xs
sm
md
lg
xl
html
<btn size="xs" color="primary" text="Button text" />
html
<btn size="sm" color="primary" text="Button text" />
html
<btn size="md" color="primary" text="Button text" />
html
<btn size="lg" color="primary" text="Button text" />
html
<btn size="xl" color="primary" text="Button text" />
Light
xs
sm
md
lg
xl
html
<btn size="xs" color="primary" text="Button text" light />
html
<btn size="sm" color="primary" text="Button text" light />
html
<btn size="md" color="primary" text="Button text" light />
html
<btn size="lg" color="primary" text="Button text" light />
html
<btn size="xl" color="primary" text="Button text" light />
Outline
xs
sm
md
lg
xl
html
<btn size="xs" color="primary" text="Button text" outline />
html
<btn size="sm" color="primary" text="Button text" outline />
html
<btn size="md" color="primary" text="Button text" outline />
html
<btn size="lg" color="primary" text="Button text" outline />
html
<btn size="xl" color="primary" text="Button text" outline />
Button colors
primary
secondary
warning
danger
success
info
html
<btn size="md" color="primary" text="Primary" />
html
<btn size="md" color="secondary" text="Secondary" />
html
<btn size="md" color="warning" text="Warning" />
html
<btn size="md" color="danger" text="Danger" />
html
<btn size="md" color="success" text="Success" />
html
<btn size="md" color="info" text="Info" />
Light button colors
primary
secondary
warning
danger
success
info
html
<btn size="md" color="primary" text="Primary" light />
html
<btn size="md" color="secondary" text="Secondary" light />
html
<btn size="md" color="warning" text="Warning" light />
html
<btn size="md" color="danger" text="Danger" light />
html
<btn size="md" color="success" text="Success" light />
html
<btn size="md" color="info" text="Info" light />
Outline button colors
primary
secondary
warning
danger
success
info
html
<btn size="md" color="primary" text="Primary" outline />
html
<btn size="md" color="secondary" text="Secondary" outline />
html
<btn size="md" color="warning" text="Warning" outline />
html
<btn size="md" color="danger" text="Danger" outline />
html
<btn size="md" color="success" text="Success" outline />
html
<btn size="md" color="info" text="Info" outline />
Colors of disabled button
default
light
outline
html
<btn size="md" color="primary" text="Button text" disabled />
html
<btn size="md" color="primary" text="Button text" light disabled />
html
<btn size="md" color="primary" text="Button text" outline disabled />
Rounded buttons
default
light
outline
html
<btn size="md" color="primary" text="Button text" rounded />
html
<btn size="md" color="primary" text="Button text" light rounded />
html
<btn size="md" color="primary" text="Button text" outline rounded />
Buttons with an icon
default
light
outline
html
<btn size="md" color="primary" text="Text"><btn-icon :icon="iconHome" /></btn>
html
<btn size="md" color="primary" text="Text" light><btn-icon :icon="iconHome" /></btn>
html
<btn size="md" color="primary" text="Text" outline><btn-icon :icon="iconHome" /></btn>
Buttons with an icon on the right (reverse)
default
light
outline
html
<btn size="md" color="primary" text="Text" reverse><btn-icon :icon="iconHome" /></btn>
html
<btn size="md" color="primary" text="Text" light reverse><btn-icon :icon="iconHome" /></btn>
html
<btn size="md" color="primary" text="Text" outline reverse><btn-icon :icon="iconHome" /></btn>
Buttons - only an icon
default
light
outline
default
light
outline
html
<btn size="md" color="primary" icononly><btn-icon :icon="iconHome" /></btn>
html
<btn size="md" color="primary" light icononly><btn-icon :icon="iconHome" /></btn>
html
<btn size="md" color="primary" outline icononly><btn-icon :icon="iconHome" /></btn>
html
<btn size="md" color="primary" icononly rounded><btn-icon :icon="iconHome" /></btn>
html
<btn size="md" color="primary" light icononly rounded><btn-icon :icon="iconHome" /></btn>
html
<btn size="md" color="primary" outline icononly rounded><btn-icon :icon="iconHome" /></btn>
Buttons - full width