Button

Commonly used button

Basic usage

Use primary, secondary, ghost and rounded to define button's style

---

<template>
  <b-space wrap class="w-full">
    <b-button>Default</b-button>
    <b-button primary>Primary</b-button>
    <b-button secondary>Secondary</b-button>
    <b-button ghost>Ghost</b-button>
    <b-button rounded>Rounded</b-button>
    <b-button primary rounded>Rounded</b-button>
  </b-space>
</template>

<script setup lang="ts"></script>

Button Icon

Use icons to add more meaning to Button. You can use icon alone to save some space, or use it with text. You can use BigIn Icon or any iconset from iconify via unocss preset

---

<template>
  <b-space wrap class="w-full">
    <b-button :icon="ArrowRight" />
    <b-button :icon="ArrowRight" primary />
    <b-button :icon="ArrowRight" secondary />
    <b-button :icon="ArrowRight" ghost />
    <b-button :icon="ArrowRight" rounded />
    <b-button :prefix-icon="Edit">Prefix</b-button>
    <b-button :suffix-icon="Delete">Suffix</b-button>
    <b-button :prefix-icon="ChevronLeft" :suffix-icon="ChevronRight"
      >Both</b-button
    >
    <b-button>
      <template #icon>
        <b-icon class="i-fluent:xbox-controller-32-regular" />
      </template>
    </b-button>
    <b-button>
      <template #prefixIcon>
        <b-icon class="i-fluent:xbox-controller-32-regular" />
      </template>
      <span>External prefix</span>
    </b-button>
    <b-button>
      <template #suffixIcon>
        <b-icon class="i-fluent:xbox-controller-32-regular" />
      </template>
      <span>External suffix</span>
    </b-button>
  </b-space>
</template>

<script lang="ts" setup>
import {
  ArrowRight,
  ChevronLeft,
  ChevronRight,
  Delete,
  Edit,
} from '@bigin/icons-vue'
</script>

Button States

Button can be disabled or loading for blocking any actions

Disabled

Loading

---

<template>
  <b-switch v-model="disabledState">
    <span class="text-sm font-semibold mr2">{{
      disabledState ? 'Disabled' : 'Normal'
    }}</span>
  </b-switch>
  <b-space wrap class="w-full mt-4">
    <b-button :disabled="disabledState">Disabled</b-button>
    <b-button :disabled="disabledState" primary>Disabled</b-button>
    <b-button :disabled="disabledState" secondary>Disabled</b-button>
    <b-button :disabled="disabledState" ghost>Disabled</b-button>
    <b-button :disabled="disabledState" :icon="Settings" />
  </b-space>
  <b-divider />
  <b-switch v-model="loadingState">
    <span class="text-sm font-semibold mr2">{{
      loadingState ? 'Loading' : 'Normal'
    }}</span>
  </b-switch>
  <b-space wrap class="w-full mt4">
    <b-button :loading="loadingState">Loading</b-button>
    <b-button :loading="loadingState" primary>Loading</b-button>
    <b-button :loading="loadingState" secondary>Loading</b-button>
    <b-button :loading="loadingState" ghost>Loading</b-button>
    <b-button :loading="loadingState" :icon="Settings" />
  </b-space>
</template>

<script setup>
import { ref } from 'vue'
import { Settings } from '@bigin/icons-vue'

const disabledState = ref(true)
const loadingState = ref(true)
</script>

Button Sizes

Besides default size, Button component provides two additional sizes for you to choose among different scenarios.

---

<template>
  <b-space wrap class="w-full">
    <b-button large>Large</b-button>
    <b-button>Normal</b-button>
    <b-button small>Small</b-button>
  </b-space>
  <b-space wrap class="w-full mt4">
    <b-button :icon="ArrowRight" large />
    <b-button :icon="ArrowRight" />
    <b-button :icon="ArrowRight" small />
    <b-button :icon="ArrowRight" xsmall />
    <b-button :icon="ArrowRight" xxsmall />
  </b-space>
</template>

<script setup lang="ts">
import { ArrowRight } from '@bigin/icons-vue'
</script>

Button Group

Displayed as a button group, can be used to group a series of similar operations.

---

<template>
  <b-space wrap>
    <b-button-group>
      <b-button>View</b-button>
      <b-button>Edit</b-button>
      <b-button>Delete</b-button>
    </b-button-group>

    <div class="flex">
      <b-button-group rounded>
        <b-button>View</b-button>
        <b-button>Edit</b-button>
        <b-button>Delete</b-button>
      </b-button-group>
      <b-button-group rounded compact class="ml2">
        <b-button :icon="MoreVertical" />
      </b-button-group>
    </div>
  </b-space>
</template>

<script setup lang="ts">
import { MoreVertical } from '@bigin/icons-vue'
</script>

Button Attributes

Attribute	Description	Type	Accepted Values	Default
primary	determine whether it's a primary button	boolean	—	false
secondary	determine whether it's a secondary button	boolean	—	false
ghost	determine whether it's a ghost button	boolean	—	false
rounded	determine whether it's a rounded button	boolean	—	false
large	determine whether it's a large button	boolean	—	false
small	determine whether it's a small button	boolean	—	false
xlarge	determine whether it's a xlarge icon button	boolean	—	false
xsmall	determine whether it's a xsmall icon button	boolean	—	false
xxsmall	determine whether it's a xxsmall icon button	boolean	—	false
loading	determine whether it's loading	boolean	—	false
loading-icon	customize loading icon component	string / Component	—	Loading
disabled	disable the button	boolean	—	false
icon	icon component	string / Component	—	—
prefix-icon	prefix icon component	string / Component	—	—
suffix-icon	suffix icon component	string / Component	—	—
autofocus	same as native button's autofocus	boolean	—	false
native-type	same as native button's type	string	button / submit / reset	button

Button Slots

Name	Description
—	customize default content
loading	customize loading component
icon	customize icon component
prefixIcon	customize icon component
suffixIcon	customize icon component

Button-Group Attributes

Attribute	Description	Type	Accepted Values	Default
rounded	rounded style	boolean	—	false
compact	no extra horizontal spacings	boolean	—	false
size	control the size of buttons in this button-group	string	same as button's size	—
type	control the type of buttons in this button-group	string	same as button's type	—

Button-Group Slots

Name	Description	Subtags
-	customize button group content	Button