Btn

Button component - used in tables or as part of navigation. Icons in buttons are placed using the BtnIcon component.

Props

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

icononly

Only 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

Button text

type:String

default:''

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 button

xs

sm

md

lg

xl

xs

<table-btn size="xs" color="primary" text="Button text" />

sm

<table-btn size="sm" color="primary" text="Button text" />

md

<table-btn size="md" color="primary" text="Button text" />

lg

<table-btn size="lg" color="primary" text="Button text" />

xl

<table-btn size="xl" color="primary" text="Button text" />

Rounded button

<table-btn size="md" text="Button text" rounded />

:::

Buttons with an icon

<table-btn size="md" text="Button text"><btn-icon :icon="iconHome" /></table-btn>

Button with icon on the right(reverse)

<table-btn size="md" text="Button text" reverse><btn-icon :icon="iconHome" /></table-btn>

Button - only an icon

<table-btn size="md" icononly>
  <btn-icon :icon="iconHome" />
</table-btn>