#Buttons

#Props

A wide array of props can be employed to modify the v-btn component’s look and functionality. Props like prepend-icon and append-icon offer a straightforward approach to incorporate positioned icons, whereas block and stacked props are utilized to manage the component’s form.

#Slots

The v-btn component provides slots that enable you to customize content created by its props or to add additional content.

Slots give you greater control to customize the content of the v-btn component while still taking advantage of the easy-to-use props.

#Discord event

In this example we utilize multiple different button variants and styles to create a copy of the Discord event card.

#Survey group

In addition to Button groups, the v-btn component cant hook into a v-item-group using a special symbol. In the next example we create a group of buttons that are used to select a survey answer and add custom active state styling.

#Tax form confirmation

This example utilizes the v-text-field component to collect data from the user and the loading prop of v-btn when submitting the form.

#Dialog action

Buttons are often used to trigger actions within a v-dialog. In this example we use the outlined variant and the color prop to create a button that is visually distinct from the other buttons.

#Cookie settings

In this example we use a v-banner component to display a custom cookie consent banner. Clicking the “Manage Cookies” button will prompt a v-dialog component.

#Readonly buttons

In this example, we change the properties of the v-btn based upon a “subscription” state. When the user is subscribed, we want to disable interaction with the button, but not change its appearance; which is what occurs when using the disabled property.

#Banners

The v-banner-actions component applies the text variant and slim prop, reducing button x-axis padding to 8px.

The following properties are modified when used within a v-banner-actions component:

#Bottom navigation

The v-bottom-navigation component scopes out all previously provided defaults and applies its own. This is to avoid changes made to v-btn in the Global configuration. Buttons automatically register with v-bottom-navigation’s’ group and will update the model when clicked.

The following properties are modified when used within a v-bottom-navigation component:

#Button groups

The v-btn-group component makes multiple changes to the v-btn component.

The following properties are modified when used within a v-btn-group component:

#Cards

The v-card-actions component applies the text variant and slim prop, reducing button x-axis padding to 8px, and applies a start margin for all siblings. This is to ensure the text from the button lines up with the text and title of the card and that there is space between its actions.

The following properties are modified when used within a v-card-actions component:

#Snackbars

The v-snackbar component applies the text variant, slim prop, and removes ripples from all v-btn components.

The following properties are modified when used within the actions slot of the v-snackbar component:

#Toolbars and AppBars

The v-toolbar component applies the text variant to all v-btn components. In addition, the v-toolbar-items component is used to create a grouping of buttons that fill the height of the toolbar.

export default createVuetify({
  defaults: {
    VToolbar: {
      VBtn: { variant: 'flat' },
    },
  },
})

The following properties are modified when used within a v-toolbar or v-toolbar-items component:

#ARIA Attributes

By default, the v-btn component includes relevant WAI-ARIA attributes to enhance accessibility. The component is automatically assigned the type="button" attribute, which indicates its purpose as a button to assistive technologies.

#Keyboard Navigation

The v-btn component is natively focusable and responds to keyboard events, such as pressing the Enter or Space key to trigger the button’s action. This ensures that users can navigate and interact with your application using just the keyboard.

#Accessible Labels

When using a v-icon within the v-btn component (e.g., with the icon prop), it is essential to provide a text alternative for screen reader users. You can add an aria-label attribute with a descriptive label to ensure that the button’s purpose is clear to all users.

<v-btn
  aria-label="Refresh"
  icon="mdi-refresh"
></v-btn>

#Touch Target Size

Make sure your buttons have an adequate touch target size, especially on touch devices. A larger touch target can improve the usability of your buttons for users with motor impairments or those using small screens. You can use large or x-large values for the size prop to increase the button size:

<v-btn size="large">
  Large Button
</v-btn>

<v-btn size="x-large">
  Extra Large Button
</v-btn>