class:[

props.variant&&props.color ?`btn-${props.variant}-${props.color}` :`btn-${props.variant}`,

[`btn-${props.color}`]:props.color&&!props.variant,

[`btn-${props.variant}-${props.color}`]:props.color&&props.variant,

[`btn-${props.size}`]:props.size,

active:props.active,

disabled:props.disabled,

If you need a button, but without the strong background colors. Set`variant="outline"` prop to remove all background colors.

The`variant="outline` property provides a neutral outline button style without any color modifiers. It’s useful as a foundation for minimal buttons without background color or strong visual emphasis.

::: demo

<CButtonvariant="outline">Base outline button</CButton>

<CButtonvariant="outline"active>Active state</CButton>

<CButtonvariant="outline"disabled>Disabled state</CButton>

:::

These Vue buttons use a transparent background, subtle border, and inherit text color from the parent context. They’re best suited for minimalist UI elements like modals, toolbars, or secondary actions.

If you need a button, but without the strong background colors, set`color` and`variant=" outline"` props to remove all background colors.

::: demo

<CButtoncolor="primary"variant="outline">Primary</CButton>

These outline variants of our Vue.js buttons retain transparent backgrounds by default, but display a background tint on hover or focus to indicate interactivity. They’re ideal for secondary actions when you want to differentiate from the standard buttons visually.

Use the`variant="ghost"` property to create ultra-minimalist buttons with no borders and a fully transparent background. These Vue buttons rely solely on text color for visibility and apply a background highlight when hovered over or in an active state.

They’re perfect for interfaces where you want buttons to be present but visually unobtrusive—such as action buttons in modals, cards, or toolbars.

If you need a ghost variant of button, set`variant="ghost"` prop to remove all background colors.

::: demo

<CButtonvariant="ghost">Base ghost button</CButton>

<CButtonvariant="ghost"active>Active state</CButton>

<CButtonvariant="ghost"disabled>Disabled state</CButton>

:::

To apply theme colors to Vue ghost buttons, use the`color` and`variant="ghost"` properties. By default, these variants color only the text. On hover or focus, they add a background that corresponds to the theme color.

::: demo

<CButtoncolor="primary"variant="ghost">Primary</CButton>

<CButtoncolor="secondary"variant="ghost">Secondary</CButton>