BeeButton

A button with three variants, a rounded shape, a loading state and a disabled state.

import { BeeButton } from "@thaisrr/beedesign";
import "@thaisrr/beedesign/style.css";

Variants

primary for the main action of a screen, secondary for alternative actions, ghost for discreet actions.

<script setup lang="ts">
import { BeeButton } from "@thaisrr/beedesign";
</script>

<template>
  <div class="row">
    <BeeButton variant="primary">Save</BeeButton>
    <BeeButton variant="secondary">Cancel</BeeButton>
    <BeeButton variant="ghost">Learn more</BeeButton>
  </div>
</template>

<style scoped>
.row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}
</style>

Rounded shape

By default, the corners are slightly rounded. The rounded prop turns the button into a pill (--bd-radius-full). It works with every variant.

<script setup lang="ts">
import { BeeButton } from "@thaisrr/beedesign";
</script>

<template>
  <div class="stack">
    <div class="row">
      <BeeButton variant="primary">Save</BeeButton>
      <BeeButton variant="secondary">Cancel</BeeButton>
      <BeeButton variant="ghost">Learn more</BeeButton>
    </div>

    <div class="row">
      <BeeButton variant="primary" rounded>Save</BeeButton>
      <BeeButton variant="secondary" rounded>Cancel</BeeButton>
      <BeeButton variant="ghost" rounded>Learn more</BeeButton>
    </div>
  </div>
</template>

<style scoped>
.stack {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}
</style>

States

While loading, the button keeps its width, shows a spinner and ignores clicks. It exposes aria-busy to screen readers.

<script setup lang="ts">
import { BeeButton } from "@thaisrr/beedesign";
</script>

<template>
  <div class="row">
    <BeeButton loading>Sending…</BeeButton>
    <BeeButton disabled>Unavailable</BeeButton>
    <BeeButton variant="secondary" disabled>Unavailable</BeeButton>
    <BeeButton variant="ghost" disabled>Unavailable</BeeButton>
  </div>
</template>

<style scoped>
.row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}
</style>

API

Props

Name	Type	Default	Description
variant	"primary" | "secondary" | "ghost"	"primary"	Visual style of the button.
type	"button" | "submit" | "reset"	"button"	type attribute of the native <button>.
rounded	boolean	false	Pill-shaped button.
disabled	boolean	false	Disables the button.
loading	boolean	false	Shows a spinner and blocks clicks.

Events

Name	Payload	Description
click	MouseEvent	Emitted on click, unless the button is disabled or loading.

Slots

Name	Description
default	Label of the button.

CSS variables used

--bd-color-primary, --bd-color-primary-hover, --bd-color-primary-edge, --bd-color-on-primary, --bd-color-primary-dark, --bd-color-primary-light, --bd-color-border, --bd-color-text-muted, --bd-color-focus, --bd-font-main, --bd-font-size-md, --bd-radius-full, --bd-space-sm, --bd-space-md, --bd-control-height, --bd-border-width-strong, --bd-focus-ring-width, --bd-focus-ring-offset, --bd-button-edge, --bd-transition-fast.

Accessibility

• Touch target at least 44 px tall.
• Visible focus ring on keyboard navigation (:focus-visible).
• aria-busy while loading.
• Reduced animations when prefers-reduced-motion is enabled.