BreezeUI
  • English

    • Button

    Displays a button or a component that looks like a button.

    Component Features

    • 🎨 8 Visual Variants: Supports solid, outline, ghost, soft, link, subtle, dashed, default.
    • 🌈 Multiple Colors: Supports default, primary, secondary, success, warning, danger, info, carbon.
    • 📏 Multiple Sizes: Supports xs, sm, md, lg, xl, 2xl, default size specs.
    • 🖼️ Icon Support: prefix and suffix slots for icons, left and right icon positions.
    • ⏳ Loading State: Supports loading prop to display loading animation.
    • ❌ Disabled State: Supports disabled prop.
    • 🔄 Rounded Styles: Supports rounded, rounded-sm, rounded-md, rounded-lg, rounded-xl, rounded-full.
    • 🎨 Theme Customization: Based on BrConfigProvider for global theming and TailwindCSS local overrides.

    Basic Usage

    <script setup>
import { BrButton } from '@breezeui/vue'
</script>

<template>
  <BrButton>Button</BrButton>
</template>

    Variants

    Use the variant prop to control the visual style of the button.

    • Solid: Default filled style.
    • Outline: Transparent border by default. Shows background on hover.
    • Plain: Bordered style with default text color. Changes to theme color on hover.
    • Pure: Completely unstyled (no padding, height, or border). Useful as a wrapper.
    • Dashed: Dashed border style.
    • Soft: Light background with theme text color.
    • Ghost: Transparent background that changes on hover.
    • Link: Text link style.

    All Variants

    <script setup>
import { BrButton } from '@breezeui/vue'
</script>

<template>
  <div class="flex items-center gap-6 flex-wrap">
    <BrButton variant="solid">Solid</BrButton>
    <BrButton variant="outline">Outline</BrButton>
    <BrButton variant="dashed">Dashed</BrButton>
    <BrButton variant="soft">Soft</BrButton>
    <BrButton variant="ghost">Ghost</BrButton>
    <BrButton variant="link">Link</BrButton>
    <BrButton variant="plain">Plain</BrButton>
    <BrButton variant="pure">Pure</BrButton>
  </div>
</template>

    Colors

    Use the color prop to control the color theme of the button.

    <script setup>
import { BrButton } from '@breezeui/vue'
</script>

<template>
  <div class="flex items-center gap-6 flex-wrap">
    <BrButton color="default">Default</BrButton>
    <BrButton color="primary">Primary</BrButton>
    <BrButton color="secondary">Secondary</BrButton>
    <BrButton color="success">Success</BrButton>
    <BrButton color="warning">Warning</BrButton>
    <BrButton color="danger">Danger</BrButton>
    <BrButton color="info">Info</BrButton>
    <BrButton color="carbon">Carbon</BrButton>
    <BrButton color="accent">Accent</BrButton>
  </div>
</template>

    Sizes

    Use the size prop to control the size of the button.

    <script setup>
import { BrButton } from '@breezeui/vue'
import { ChevronRight } from 'lucide-vue-next'
</script>

<template>
  <div class="flex items-center gap-6 flex-wrap">
    <BrButton size="xs">Extra Small</BrButton>
    <BrButton size="sm">Small</BrButton>
    <BrButton size="default">Default</BrButton>
    <BrButton size="md">Medium</BrButton>
    <BrButton size="lg">Large</BrButton>
    <BrButton size="xl">Extra Large</BrButton>
    <BrButton size="2xl">2X Large</BrButton>
    <BrButton size="icon">
      <ChevronRight class="h-4 w-4" />
    </BrButton>
  </div>
</template>

    With Icons

    You can add icons using the prefix or suffix slots, or by combining them in the default slot.

    <script setup>
import { BrButton } from '@breezeui/vue'
</script>

<template>
  <div class="flex gap-4">
    <BrButton>
      <template #prefix>
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
      </template>
      Login with Email
    </BrButton>
    <BrButton variant="outline">
      Loading
      <template #suffix>
         <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
      </template>
    </BrButton>
  </div>
</template>

    Loading State

    Set the loading prop to true to show a loading state.

    <script setup>
import { BrButton } from '@breezeui/vue'
</script>

<template>
  <BrButton loading>Please wait</BrButton>
</template>

    Disabled State

    Set the disabled prop to disable the button.

    <script setup>
import { BrButton } from '@breezeui/vue'
</script>

<template>
  <BrButton disabled>Disabled</BrButton>
</template>

    Rounded

    Set the rounded prop to true for a fully rounded (pill) style.

    <script setup>
import { BrButton } from '@breezeui/vue'
</script>

<template>
  <BrButton rounded>Rounded Button</BrButton>
</template>

    Theming

    Global Customization (BrConfigProvider)

    You can override default CSS variables via the theme prop of BrConfigProvider.

    <script setup>
import { BrConfigProvider, BrButton } from '@breezeui/vue'

const theme = {
  primary: '#E11D48', // Rose 600
  primaryForeground: '#FFFFFF',
  radius: 0.75
}
</script>

<template>
  <BrConfigProvider :theme="theme">
    <div class="p-4 border rounded">
      <BrButton>Custom Theme Button</BrButton>
    </div>
  </BrConfigProvider>
</template>

    Local Customization (TailwindCSS)

    You can directly override styles using TailwindCSS utility classes.

    <template>
  <BrButton class="bg-indigo-500 hover:bg-indigo-600">Custom Class</BrButton>
</template>

    API

    Props

    NameTypeDefaultDescription
    variantstring'solid'Visual style variants: solid, outline, dashed, soft, ghost, link, plain, pure
    colorstring'default'Color theme variants: default, primary, secondary, success, warning, danger, info, carbon, accent
    sizestring'default'Size variants: default, xs, sm, md, lg, xl, 2xl, icon
    asstring'button'The HTML tag or component to render
    disabledbooleanfalseWhether the button is disabled
    loadingbooleanfalseWhether to show loading state
    roundedbooleanfalseWhether to use full rounded style
    typestring'button'Native type attribute

    Slots

    NameDescription
    defaultButton content
    prefixContent before the default content (e.g., icon)
    suffixContent after the default content (e.g., icon)

    Emits

    NameDescriptionParameters
    clickClick event(event: MouseEvent)