Round all buttons in Vuetify design

Question

Round all buttons in Vuetify design

I am currently working on a vuetify application that has a multitude of buttons, and I am looking to change them all to have a rounded style without having to individually add the property to each one. Is there a way to achieve this using themes or presets?

Adding the following style works:

.v-btn{
        border-radius:28px!important;
    }

However, this approach limits my ability to use normal buttons in the future.

Creating a custom component like my-rounded-button is also an option. However, if I want to set properties globally for other components, I would need to create a custom component for every element in vuetify. Additionally, if I decide to change all buttons in the middle of the project, I would still need to modify all button names from v-btn to my-rounded-button.

My goal is to have the rounded property automatically set to true for all v-btn components, with the option to toggle it off by setting :rounded="false" when necessary.

javascript vue.js vuejs2 vue-component vuetify.js

Answer 1

Answer №1

After attempting to establish a default prop using presets, it was discovered that this method does not work for all components, such as buttons. Therefore, the suggestion is to define a global CSS rule:

.v-btn{
    border-radius:28px!important;
}

Additionally, when wanting to use a normal button, another CSS rule can be added:

.v-btn-not-rounded{
    border-radius:4px!important;
}

Then, utilize class binding like so:

<v-btn depressed :class={'v-btn-not-rounded':true} color="primary">not rounded</v-btn>

For further reference, please refer to this codepen.

Answer 2

After attempting to establish a default prop using presets, it was discovered that this method does not work for all components, such as buttons. Therefore, the suggestion is to define a global CSS rule:

.v-btn{
    border-radius:28px!important;
}

Additionally, when wanting to use a normal button, another CSS rule can be added:

.v-btn-not-rounded{
    border-radius:4px!important;
}

Then, utilize class binding like so:

<v-btn depressed :class={'v-btn-not-rounded':true} color="primary">not rounded</v-btn>

For further reference, please refer to this codepen.

Answer 3

Answer №2

If you want to customize the default "rounded" property when using createVuetify, you can do so like this:

import { createVuetify } from 'vuetifyjs'

export createVuetify({
  defaults: {
    VBtn: {
      rounded: 'lg',
    },
  },
})

Check out this link for more information on aliasing components in Vuetify You can also explore how to customize the rounded property in buttons here

Answer 4

If you want to customize the default "rounded" property when using createVuetify, you can do so like this:

import { createVuetify } from 'vuetifyjs'

export createVuetify({
  defaults: {
    VBtn: {
      rounded: 'lg',
    },
  },
})

Check out this link for more information on aliasing components in Vuetify You can also explore how to customize the rounded property in buttons here

Round all buttons in Vuetify design

Answer №1

Answer №2

Similar questions

Bootstrap-vue is designed to seamlessly integrate with Vue.js, however, it seems to be experiencing some issues

The link appears to be broken when trying to access the notFound component in Next.js version 13

Error in Compiling HTML Elements Collection<<Element>

HTML automatically removes added elements

Refresh the information on the page by loading data from the log file using AJAX

Implement the parent jQuery library within a child iframe

Guide on incorporating a Vue component into multiple components and leveraging a method to invoke it

What precautions can I take to safely and securely extend event handling?

Need to update various form fields at once with jquery?

Using Vue.js - Passing a prop into $.each() within the mounted lifecycle hook

Get rid of the ad wrapper that prompts users to disable their adblocker on the news page

Generate a dynamic key object in Angular/TypeScript

Seeking clarification on the distinction between using an input of type button versus an input of type submit when triggering a jQuery form submission

Using conditional statements in a forEach iteration

Is there a way to position the tooltip above the sorter icon in Ant Design (antd) component?

Send an ArrayList to jQuery Flot

Using Puppeteer to tally the instances of a particular text on a website: A step-by-step guide

What method is recommended for saving data in an HTML data attribute?

Is it feasible to place an ordered list within a table row <tr>?

Provide a unique <li> attribute for the JavaScript function to utilize