Button

A common interactive control. Users click or tap a button to trigger actions such as submitting a form, opening a page, or running a feature.

Button

Options

Full

Disabled

Loading

Shape

Status

Type

Size

Basic Usage

Supports 5 types: normal - normal (default), secondary - secondary, plain - plain, dashed - dashed, text - text.

<template>
  <bp-button type="secondary" status="primary">Secondary button</bp-button>
  <bp-button type="normal" status="primary">Normal button</bp-button>
  <bp-button type="plain" status="primary">Outline button</bp-button>
  <bp-button type="dashed" status="primary">Dashed button</bp-button>
  <bp-button type="text" status="primary">Text button</bp-button>
</template>

Shape

Supports 3 shapes: square - square (default), round - round, circle - circle.

<template>
  <bp-button shape="square" status="primary">Square</bp-button>
  <bp-button shape="round" status="primary">Round</bp-button>
  <bp-button shape="circle" status="primary">Circle</bp-button>
</template>

Status

Supports 5 statuses: gray - gray, primary - primary (default), success - success, warning - warning, danger - danger.

<template>
  <div class="button-demo">
    <template v-for="status in buttonStatus" :key="status.value">
      <div class="button-row">
        <bp-button v-for="type in buttonTypes" :key="type" :status="status.value" :type>
          {{ status.name }}
        </bp-button>
      </div>
    </template>
  </div>
</template>

<script setup lang="ts">
const buttonStatus = [
  { name: "Gray", value: "gray" },
  { name: "Primary", value: "primary" },
  { name: "Success", value: "success" },
  { name: "Alert", value: "warning" },
  { name: "Danger", value: "danger" },
] as const;
const buttonTypes = ["secondary", "normal", "plain", "dashed", "text"] as const;
</script>

<style lang="scss" scoped>
.button-demo {
  .button-row {
    margin-bottom: 8px;
  }
}
</style>

Size

Supports 4 sizes: mini - mini, small - small, default - default, large - large.

<template>
  <bp-button size="mini">Mini</bp-button>
  <bp-button size="small">Small</bp-button>
  <bp-button size="default">Normal</bp-button>
  <bp-button size="large">Large</bp-button>
</template>

Loading

Use loading and loading-icon to show a loading state.

<template>
  <bp-button :loading type="plain" status="primary">{{ loading ? "Saving" : "Save" }}</bp-button>
  <bp-button :loading :icon="IconUploadCloudLine" type="plain" shape="circle" status="primary"></bp-button>
  <bp-button type="text" status="primary" @click="onChange">Toggle</bp-button>
</template>

<script lang="ts" setup>
import { IconUploadCloudLine } from "birdpaper-icon";
import { ref } from "vue";

const loading = ref(false);
const onChange = () => {
  loading.value = !loading.value;
};
</script>

Tip

loading-icon accepts a number from 1-5 or a custom Icon Component.

Icon Button

Set an icon with the icon prop.

<template>
  <bp-button :icon="IconSearch2Line" type="normal" status="primary">Search</bp-button>
  <bp-button :icon="IconDeleteBin6Line" type="plain" status="danger">Confirm delete</bp-button>
  <bp-button :icon="IconShareFill" type="plain" status="primary"></bp-button>
  <bp-button :icon="IconUploadCloud2Line" type="text" status="primary">Upload</bp-button>
</template>

<script setup lang="ts">
import { IconShareFill, IconSearch2Line, IconDeleteBin6Line, IconUploadCloud2Line } from "birdpaper-icon";
</script>

Button Group

Group related buttons for clearer layout and actions.

<template>
  <bp-space>
    <bp-button-group type="plain">
      <bp-button> <i class="ri-arrow-left-s-line"></i> Previous</bp-button>
      <bp-button>Next <i class="ri-arrow-right-s-line"></i></bp-button>
    </bp-button-group>

    <bp-button-group type="plain" status="primary">
      <bp-button :icon="IconHeart3Fill"></bp-button>
      <bp-button :icon="IconStarFill"></bp-button>
      <bp-button :icon="IconThumbUpFill"></bp-button>
    </bp-button-group>

    <bp-button-group type="normal" status="primary">
      <bp-button>More</bp-button>
      <bp-button :icon="IconArrowDownSLine"></bp-button>
    </bp-button-group>
  </bp-space>
</template>

<script setup lang="ts">
import { IconArrowDownSLine, IconHeart3Fill, IconStarFill, IconThumbUpFill } from "birdpaper-icon";
</script>

Button Props

type	Button type	ButtonType	normal	-
attr-type	Native type attribute	ButtonNavtiveType	button	-
status	Button status	ButtonStatus	primary	-
size	Button size	ButtonSize	default	-
shape	Button shape	ButtonShape	square	-
disabled	Whether disabled	Boolean	-	-
loading	Whether loading	Boolean	-	-
loading-icon	Loading icon	NumberIcon	1	-
full	Whether to fill parent width	Boolean	-	-
icon	Button icon	Icon	-	-
icon-gap	Gap between icon and text	StringNumber	-	-
icon-position	Icon position	ButtonIconPosition	left	-

ButtonGroup Props

type	Button type	ButtonType	normal	-
status	Button status	ButtonStatus	gray	-
size	Button size	ButtonSize	default	-
shape	Button shape	ButtonShape	square	-
disabled	Whether disabled	Boolean	-	-

Button Events

click

Triggered on click

--

-

Button Slots

default

Default slot

-

-

ButtonGroup Slots

default

Button group content

-

-