Button

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

Basic Usage

Example

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

Example

Colors

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

Example

Sizes

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

Example

With Icons

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

Example

Loading State

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

Example

Disabled State

Set the disabled prop to disable the button.

Example

Rounded

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

Example

Theming

Global Customization (BrConfigProvider)

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

Example

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

Name	Type	Default	Description
variant	string	'solid'	Visual style variants: solid, outline, dashed, soft, ghost, link, plain, pure
color	string	'default'	Color theme variants: default, primary, secondary, success, warning, danger, info, carbon, accent
size	string	'default'	Size variants: default, xs, sm, md, lg, xl, 2xl, icon
as	string	'button'	The HTML tag or component to render
disabled	boolean	false	Whether the button is disabled
loading	boolean	false	Whether to show loading state
rounded	boolean	false	Whether to use full rounded style
type	string	'button'	Native type attribute

Slots

Name	Description
default	Button content
prefix	Content before the default content (e.g., icon)
suffix	Content after the default content (e.g., icon)

Emits

Name	Description	Parameters
click	Click event	(event: MouseEvent)