Buttons

Narrative's button component

Selector

nio-button

Props

Prop name	Type	Supported values	Default value
variant	string	primary | secondary | tertiary | selected | error	primary
size	string	extra-large | large | normal | small | extra-small	extra-large
caps	boolean	true | false	true
iconName	string	any string

Prop details:

:variant

the stylistic variant of the button

:size

the size of the button

:caps

whether the text in the default slot will be converted to uppercase

:iconName

used in conjunction with the icon prop or when using a helper attribute that supports icons. (see Helper Attributes below). Set to the desired icon name from your installed icon library supported by Vuetify

Events

This component preserves all events emitted by Vuetify's v-button component. See Vuetify's documentation for more details: https://vuetifyjs.com/en/components/buttons/

Additionally, the nio-button component provides the following event emitters:

@mounted

Emits when the component's mounted lifecycle method is executed

@destroyed

Emits when the component's destroyed lifecycle method is executed

Slots

This component preserves all of the named slotes supported by Vuetify's v-button component. See Vuetify's documentation for more details.

Examples

The following is a simple example of how to use this component in a Vue template:

<nio-button :variant="'primary'" :size="'normal'" @click="yourHandler">Button Text</nio-button>

Included here are live examples of this component in common configurations. Click below to view them.

Helper attributes

This component provides helper attributes to create buttons commonly used in the Narrative UI. These helper attributes ovverride the :variant, :size and :caps props, so should not be used in conjuection with those props

Example:

<nio-button normal-primary>Button text</nio-button>

TIP

For attributes referencing icons (xxx-prepend, xxx-append, xxx-icon), pass the icon name with the :iconName prop

<nio-button normal-primary-prepend :iconName="mdi-chevron-left">Button text</nio-button>

Click below for a list of available helper attributes.

Source Code

This component's source code is included for your reference