Button Component

Buttons are a central part in all web and mobile application with a wide variety of usage. Explore Vulk buttons.

Components Open Docs
SizesShapeTypesColorOutlinedIconsElevationLoadingDisabled

Button Sizes

Available button sizes


<template>
  <Button>Normal</Button>
  <Button size="medium">Medium</Button>
  <Button size="large">Large</Button>
</template>

Button Shape

Rounded button variation


<template>
  <Button rounded>Normal</Button>
  <Button size="medium" rounded>Medium</Button>
  <Button size="large" rounded>Large</Button>
</template>

Button Type

Available button types

Iam a Link Iam a RouterLink 

<template>
  <Button>Iam a Button</Button>
  <Button href="https://google.com">Iam a Link</Button>
  <Button to="index">Iam a RouterLink</Button>
</template>

Button Colors

Available button colors


<template>
  <Button color="primary" :long="1">Primary</Button>
  <Button color="success" :long="1">Success</Button>
</template>

Outlined

Available outlined buttons


<template>
  <Button color="primary" :long="1" outlined>Primary</Button>
  <Button color="success" :long="1" outlined>Success</Button>
  <Button color="info" :long="1" outlined>Info</Button>
</template>

Button Icons

Icon buttons variation


<template>
  <Button icon-left="feather:github">GitHub</Button>
  <Button icon-right="feather:arrow-right">Go Right</Button>
</template>

Elevation

Button elevation variations


<template>
  <Button color="primary" elevated>Primary</Button>
  <Button color="success" raised>Success</Button>
  <Button color="info" elevated>Info</Button>
</template>

Button Loading

Loading button state


<template>
  <Button loading>Default</Button>
  <Button color="primary" loading>Primary</Button>
  <Button color="success"loading>Success</Button>
</template>

Button disabled

Disabled button state


<template>
  <Button disabled>Default</Button>
  <Button color="primary" disabled>Primary</Button>
  <Button color="success"disabled>Success</Button>
</template>