Button ​

The VBtn component is a button element that can be added to your Vue.js templates. It can be used in a variety of ways, including:

• As a default button
• With a specified color (primary, secondary, info, warning, error, or dark)
• With an outlined style
• With a text style
• With a flush style, which removes padding and sets the width and height to auto
• With a rounded style
• With a tile style, which removes the border radius

Usage ​

Basic Usage ​

To use the VBtn component, simply add it to your template.

Outlined ​

Use outlined prop to apply outlined style.

Text ​

Use text prop to apply text style.

Soft ​

Use soft prop to apply soft style.

Flush ​

• Prop: flush
• Type: boolean
• Default Value: false

Use flush prop to remove button padding. It will also set the width and height button to auto;

Rounded ​

Use rounded prop to apply rounded style.

Tile ​

Use tile prop to apply tile style. This will remove border radius from button.

Sizes ​

Use size prop to change button size.

You can even roll your own custom sizing with CSS variables:

<template>
  <VBtn
    :style="{
      '--btn-height': 40,
      '--btn-padding-x': 16,
      '--btn-padding-y': 8,
    }"
  >
    Button
  </VBtn>
</template>

<template>
  <VBtn
    :style="{
      '--btn-height': 40,
      '--btn-padding-x': 16,
      '--btn-padding-y': 8,
    }"
  >
    Button
  </VBtn>
</template>

Disabled ​

Use disabled prop to disable the button.

Outlined button have different disabled style.

Loading ​

Use loading prop to set button loading state.

Block ​

Use block prop to make button full width.

Shadow ​

Use shadow prop to add shadow to the button.

No ring effect ​

Use no-ring prop to remove ring effect to the button.

Icon ​

Use prefix-icon prop to add icon to the button before the text. Use suffix-icon prop to add icon to the button after the text.

FAB ​

Use fab prop to make the button as floating action button (FAB).

Button Group ​

You can group the button using VBtnGroup component. You can also wrap the grouped button inside toolbar using VBtnToolbar component.

Props ​

Events ​

None

Slots ​

• default

Use the default slot to place the content such as text or icon.

<template>
  <VBtn> Button </VBtn>
</template>

<template>
  <VBtn> Button </VBtn>
</template>

• prefix

Use the prefix slot to place the content before the text.

<template>
  <VBtn>
    <template #prefix> Prefix </template>
    Button
  </VBtn>
</template>

<template>
  <VBtn>
    <template #prefix> Prefix </template>
    Button
  </VBtn>
</template>

• suffix

Use the suffix slot to place the content after the text.

<template>
  <VBtn>
    <template #suffix> Suffix </template>
    Button
  </VBtn>
</template>

<template>
  <VBtn>
    <template #suffix> Suffix </template>
    Button
  </VBtn>
</template>

CSS Variables ​

:root {
  --btn-border-radius: var(--border-radius-lg);
  --btn-group-border-radius: var(--btn-border-radius);
  --btn-border-width: 1px;
  --btn-padding-x: 14px;
  --btn-padding-y: 0;
  --btn-font-size: var(--size-font-sm);
  --btn-line-height: 20px;
  --btn-font-weight: 600;
  --btn-shadow: none;
  --btn-icon-width: 20px;
  --btn-icon-height: 20px;
  --btn-line-height: 20px;
  --btn-transition: all 0.3s ease-in-out;

  // sm
  --btn-sm-height: 32px;

  // md
  --btn-md-height: 44px;

  // lg
  --btn-lg-height: 52px;

  // xl
  --btn-xl-height: 60px;

  // 2xl
  --btn-2xl-height: 68px;
}

:root {
  --btn-border-radius: var(--border-radius-lg);
  --btn-group-border-radius: var(--btn-border-radius);
  --btn-border-width: 1px;
  --btn-padding-x: 14px;
  --btn-padding-y: 0;
  --btn-font-size: var(--size-font-sm);
  --btn-line-height: 20px;
  --btn-font-weight: 600;
  --btn-shadow: none;
  --btn-icon-width: 20px;
  --btn-icon-height: 20px;
  --btn-line-height: 20px;
  --btn-transition: all 0.3s ease-in-out;

  // sm
  --btn-sm-height: 32px;

  // md
  --btn-md-height: 44px;

  // lg
  --btn-lg-height: 52px;

  // xl
  --btn-xl-height: 60px;

  // 2xl
  --btn-2xl-height: 68px;
}

Tailwind Plugin ​

This package comes with custom tailwind plugin for styling. If you are installing this package separately from @morpheme/ui package, you need to include the plugin in plugins section in your Tailwind config file.

// tailwind.config.js
module.exports = {
  content: [],
  plugins: [require('@morpheme/tailwind-components/button')],
};

// tailwind.config.js
module.exports = {
  content: [],
  plugins: [require('@morpheme/tailwind-components/button')],
};

Standalone Installation ​

You can also install the Button component individually via @morpheme/button package:

npm i @morpheme/button

npm i @morpheme/button

<script setup lang="ts">
import VBtn from '@morpheme/button';
</script>

<template>
  <VBtn> Button </VBtn>
</template>

<script setup lang="ts">
import VBtn from '@morpheme/button';
</script>

<template>
  <VBtn> Button </VBtn>
</template>

Storybook ​

View Storybook documentation here.