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.
import { CButton } from '@coreui/vue'
| Property | Default | Type |
|---|
| active | undefined | boolean |
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+ | undefined | boolean |
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. |
| link6.0.0+ | - | boolean |
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. |
| Event name |
|---|
| click |
Event called when the user clicks on the button. |