Vue Buttons Component API

Buttons API

Explore the API reference for the Vue Buttons component and discover how to effectively utilize its props for customization.

On this page

CButton

jsx
import { CButton } from '@coreui/vue'

Props

PropertyDefaultType
activeundefinedboolean

Toggle the active state for the component. With toggle it is the controlled active state of the toggle button. For the uncontrolled toggle use defaultActive; manage the controlled state from the click event.

as'button'string

Component used for the root node. Either a string to use a HTML element or a component.

colorDeprecated 6.0.0-Color

Sets the color context of the component to one of CoreUI’s themed colors.

Use theme instead — color renders the same variant and theme-{color} classes and loses to theme when both are set.

defaultActive6.0.0+undefinedboolean

The initial active state of an uncontrolled toggle button — read once on mount.

disabled-boolean

Toggle the disabled state for the component.

href-string

The href attribute specifies the URL of the page the link goes to.

iconOnly6.0.0+-boolean

Square the button for a lone icon - remember to give it an aria-label.

Render the button as a link. It behaves like a button but takes its color from the link color rather than from a theme, so theme and variant do not apply to it.

shape-Shape

Select the shape of the component.

size-string

Size the component small or large.

theme6.0.0+-Color

Sets the color context of the component to one of CoreUI’s themed colors. Pair it with variant for the shape — a button is a shape plus a colour. The class may also sit on any ancestor, so theming a toolbar themes the buttons inside it.

toggle5.10.0+-boolean

Make the button behave as a toggle button. It manages its own active/pressed state, toggling it on click and reflecting it via the aria-pressed attribute.

type'button'string

Specifies the type of button. Always specify the type attribute for the <button> element. Different browsers may use different default types for the <button> element.

variant-string

Set the shape of the button — how much ink it uses. Defaults to solid when theme is set.

Events

Event name
click

Event called when the user clicks on the button.