Button

Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.

Examples

Use any of the available button types to quickly create a styled button.

vue

<template>
  <Btn>Default</Btn>
  <Btn type="primary">Primary</Btn>
  <Btn type="success">Success</Btn>
  <Btn type="info">Info</Btn>
  <Btn type="warning">Warning</Btn>
  <Btn type="danger">Danger</Btn>
  <Btn type="link">Link</Btn>
</template>

<script setup>
import { Btn } from 'uiv';
</script>

Links

Buttons with href or to prop will render as link tag.

vue

<template>
  <h4>Native links</h4>
  <Btn href="#">Default</Btn>
  <Btn href="#" type="primary">Primary</Btn>
  <h4>Vue Router links</h4>
  <Btn to="/">Default</Btn>
  <Btn to="/" type="primary">Primary</Btn>
</template>

<script setup>
import { Btn } from 'uiv';
</script>

Sizes

Fancy larger or smaller buttons? Add size lg, sm, or xs for additional sizes.

vue

<template>
  <p>
    <Btn size="lg" type="primary">Large button</Btn>
    <Btn size="lg">Large button</Btn>
  </p>
  <p>
    <Btn type="primary">Default button</Btn>
    <Btn>Default button</Btn>
  </p>
  <p>
    <Btn size="sm" type="primary">Small button</Btn>
    <Btn size="sm">Small button</Btn>
  </p>
  <p>
    <Btn size="xs" type="primary">Extra small button</Btn>
    <Btn size="xs">Extra small button</Btn>
  </p>
</template>

<script setup>
import { Btn } from 'uiv';
</script>

Create block level buttons—those that span the full width of a parent — by adding block.

vue

<template>
  <Btn block size="lg" type="primary">Block level button</Btn>
  <Btn block size="lg">Block level button</Btn>
</template>

<script setup>
import { Btn } from 'uiv';
</script>

Active state

Add active to make buttons appear pressed (with a darker background, darker border, and inset shadow).

vue

<template>
  <h4>Buttons</h4>
  <Btn active type="primary">Primary button</Btn>
  <Btn active>Button</Btn>
  <h4>Links</h4>
  <Btn active href="#" type="primary">Primary button</Btn>
  <Btn active to="/">Button</Btn>
</template>

<script setup>
import { Btn } from 'uiv';
</script>

Disabled state

Add disabled to make buttons unclickable.

vue

<template>
  <h4>Buttons</h4>
  <Btn disabled type="primary">Primary button</Btn>
  <Btn disabled>Button</Btn>
  <h4>Links</h4>
  <Btn disabled href="#" type="primary">Primary button</Btn>
  <Btn disabled to="/">Button</Btn>
</template>

<script setup>
import { Btn } from 'uiv';
</script>

Checkbox / Radio

Add input-type to render <btn> as checkbox or radio input.

TIP

This needed to work with btn-group for correct styles.

Checkbox example

vue

<template>
  <BtnGroup>
    <Btn v-model="model" input-type="checkbox" input-value="1">Checkbox 1</Btn>
    <Btn v-model="model" input-type="checkbox" input-value="2">Checkbox 2</Btn>
    <Btn v-model="model" input-type="checkbox" input-value="3">Checkbox 3</Btn>
    <Btn v-model="model" input-type="checkbox" input-value="4" disabled
      >Checkbox 4 (Disabled)</Btn
    >
  </BtnGroup>
  <hr />
  <Alert>Selected: {{ model }}</Alert>
</template>
<script setup>
import { ref } from 'vue';
import { Btn, BtnGroup, Alert } from 'uiv';

const model = ref(['1']);
</script>

Radio example

vue

<template>
  <BtnGroup>
    <Btn v-model="model" input-type="radio" input-value="1">Radio 1</Btn>
    <Btn v-model="model" input-type="radio" input-value="2">Radio 2</Btn>
    <Btn v-model="model" input-type="radio" input-value="3">Radio 3</Btn>
    <Btn v-model="model" input-type="radio" input-value="4" disabled
      >Radio 4 (Disabled)</Btn
    >
  </BtnGroup>
  <hr />
  <Alert>Selected: {{ model }}</Alert>
</template>
<script setup>
import { ref } from 'vue';
import { Btn, BtnGroup, Alert } from 'uiv';

const model = ref('1');
</script>

API Reference

Btn

Props

Name	Type	Default	Description
`type`	String	default	Button types in Bootstrap. Supported: `default`, `primary`, `info`, `success`, `warning`, `danger`, `link`.
`native-type`	String	button	Native button type. Supported: `button`, `submit`, `reset`.
`size`	String		Optional button sizes. Supported: `lg`, `sm`, `xs`.
`block`	Boolean	false	Apply block level style.
`active`	Boolean	false	Apply active state.
`disabled`	Boolean	false	Apply disabled state.
`href`	String		An native link will be created if this prop present.
`target`	String		Native link prop.
`to`	String or Object		An Vue-Router link will be created if this prop present.
`replace`	Boolean	false	Vue-Router link prop.
`append`	Boolean	false	Vue-Router link prop.
`exact`	Boolean	false	Vue-Router link prop.
`input-type`	String		Use this prop to turn btn to checkbox or radio input. Supported types: `checkbox` / `radio`
`input-value`			The value of input.
`v-model`			The model of input. Note that this prop is required if `input-type` present.
`justified`	Boolean	false	Due to Bootstrap limitation, this prop is needed while using `<btn>` in `<btn-group justified>`. Otherwise it can be ignored.

Slots

Name	Description
`default`	The button body.

Events

Name	Params	Description
`click`		Click event of button / link.

Button ​

Examples ​

Links ​

Sizes ​

Active state ​

Disabled state ​

Checkbox / Radio ​

Checkbox example ​

Radio example ​

API Reference ​

Btn ​

Props ​

Slots ​

Events ​