NcButton
Props
Prop name | Description | Type | Values | Default |
---|---|---|---|---|
disabled | Toggles the disabled state of the button on and off. | boolean | - | false |
type | Specifies the button type Accepted values: primary, secondary, tertiary, tertiary-no-background, tertiary-on-primary, error, warning, success. If left empty, the default button style will be applied. | string | primary , secondary , tertiary , tertiary-no-background , tertiary-on-primary , error , warning , success | 'secondary' |
nativeType | Specifies the button native type Accepted values: submit, reset, button. If left empty, the default "button" type will be used. | string | submit , reset , button | 'button' |
wide | Specifies whether the button should span all the available width. By default, buttons span the whole width of the container. | boolean | - | false |
ariaLabel | Always try to provide an aria-label to your button. Make it more specific than the button's title by provide some more context. E.g. if the title of the button is "send" in the Mail app, the aria label could be "Send email". | string | - | null |
href | Providing the href attribute turns the button component into an a element. | string | - | null |
to | Providing the to attribute turns the button component into a router-link element. Takes precedence over the href attribute. | string|object | - | null |
exact | Pass in true if you want the matching behaviour of router-link tobe non-inclusive: https://router.vuejs.org/api/#exact | boolean | - | false |
Slots
Name | Description | Bindings |
---|---|---|
icon | The material design icon slot | |
default |
General description
General purpose button component. See props for different options. Use material design icons only for icons and remember to set their size to 20.
Usage
Custom icon slot
To be used with vue-material-design-icons
only. For icon classes use the default-icon
slot. It can be used with one or multiple actions.
loading...