Buttons Config Flavors

The VueVentus Buttons Config maps to the .buttons property of your app VvConfig object. Global values should be set in your app.vv file, to be both provided and/or imported for use at the component level as a single source of truth for button element styling in your app.

Buttons Config Default Values

Contributor:@oberocks
            
                // ./src/app.vv.ts

                import { Transitions, VvConfig } from '@obewds/vueventus'
                import type { ConfigVv } from '@obewds/vueventus'

                let appVv: ConfigVv = VvConfig
            
        
                    
                        appVv.buttons.blockDisplay = 'block w-full flex flex-col items-center justify-center'

                        appVv.buttons.blockSizes = {
                            '4xs': 'px-1 py-1 text-2xs',
                            '3xs': 'px-2.5 py-1.5 text-2xs',
                            '2xs': 'px-2.5 py-1.5 text-xs',
                             'xs': 'px-4 py-2 text-sm',
                             'sm': 'px-4 py-2 text-base',
                             'md': 'px-6 py-3 text-base',
                             'lg': 'px-6 py-3 text-lg',
                             'xl': 'px-7 py-3.5 text-lg',
                            '2xl': 'px-8 py-5 text-xl',
                            '3xl': 'px-9 py-5 text-2xl',
                            '4xl': 'px-10 py-6 text-2xl',
                        }

                        appVv.buttons.border     = 'border'
                        appVv.buttons.cursor     = 'cursor-pointer'
                        appVv.buttons.disabled   = 'disabled:opacity-25'
                        appVv.buttons.display    = 'inline-flex items-center'
                        appVv.buttons.fabDisplay = 'inline-flex items-center items-center justify-center'

                        appVv.buttons.fabSizes = {
                            '4xs': 'w-6 h-6 text-xxs',
                            '3xs': 'w-7 h-7 text-xxs',
                            '2xs': 'w-8 h-8 text-xs',
                             'xs': 'w-9 h-9 text-xs',
                             'sm': 'w-10 h-10 text-sm',
                             'md': 'w-11 h-11 text-sm',
                             'lg': 'w-12 h-12 text-base',
                             'xl': 'w-14 h-14 text-base',
                            '2xl': 'w-16 h-16 text-lg',
                            '3xl': 'w-20 h-20 text-xl',
                            '4xl': 'w-24 h-24 text-xl',
                        }

                        appVv.buttons.focus    = 'focus:outline-none focus:ring focus:ring-opacity-50'
                        appVv.buttons.rounding = ''
                        appVv.buttons.shadow   = ''

                        appVv.buttons.sizes = {
                            '4xs': 'px-1 py-px text-xxs',
                            '3xs': 'px-1.5 py-0.5 text-xxs',
                            '2xs': 'px-2 py-1 text-xs',
                             'xs': 'px-2.5 py-1.5 text-xs',
                             'sm': 'px-2.5 py-1.5 text-sm',
                             'md': 'px-4 py-2 text-sm',
                             'lg': 'px-4 py-2 text-base',
                             'xl': 'px-6 py-3 text-base',
                            '2xl': 'px-7 py-4 text-lg',
                            '3xl': 'px-8 py-4 text-xl',
                            '4xl': 'px-8 py-5 text-xl',
                        }
                        
                        appVv.buttons.text       = 'font-semibold uppercase tracking-widest'
                        appVv.buttons.transition = appVv.transitions.classes('colors', 'inOut', '300')
                    
                
            
                export default appVv
            
        

Scaling Rounded Corner Buttons

Contributor:@oberocks
            
                // ./src/app.vv.ts

                import { VvConfig } from '@obewds/vueventus'
                import type { ConfigVv } from '@obewds/vueventus'

                let appVv: ConfigVv = VvConfig
            
        
                    
                        appVv.buttons.blockSizes = {
                            '4xs': appVv.buttons.blockSizes['4xs'] + ' rounded-sm',
                            '3xs': appVv.buttons.blockSizes['3xs'] + ' rounded-sm',
                            '2xs': appVv.buttons.blockSizes['2xs'] + ' rounded',
                             'xs': appVv.buttons.blockSizes['xs']  + ' rounded',
                             'sm': appVv.buttons.blockSizes['sm']  + ' rounded-md',
                             'md': appVv.buttons.blockSizes['md']  + ' rounded-md',
                             'lg': appVv.buttons.blockSizes['lg']  + ' rounded-lg',
                             'xl': appVv.buttons.blockSizes['xl']  + ' rounded-lg',
                            '2xl': appVv.buttons.blockSizes['2xl'] + ' rounded-xl',
                            '3xl': appVv.buttons.blockSizes['3xl'] + ' rounded-xl',
                            '4xl': appVv.buttons.blockSizes['4xl'] + ' rounded-xl',
                        }

                        appVv.buttons.sizes = {
                            '4xs': appVv.buttons.sizes['4xs'] + ' rounded-sm',
                            '3xs': appVv.buttons.sizes['3xs'] + ' rounded-sm',
                            '2xs': appVv.buttons.sizes['2xs'] + ' rounded',
                             'xs': appVv.buttons.sizes['xs']  + ' rounded',
                             'sm': appVv.buttons.sizes['sm']  + ' rounded-md',
                             'md': appVv.buttons.sizes['md']  + ' rounded-md',
                             'lg': appVv.buttons.sizes['lg']  + ' rounded-lg',
                             'xl': appVv.buttons.sizes['xl']  + ' rounded-lg',
                            '2xl': appVv.buttons.sizes['2xl'] + ' rounded-xl',
                            '3xl': appVv.buttons.sizes['3xl'] + ' rounded-xl',
                            '4xl': appVv.buttons.sizes['4xl'] + ' rounded-xl',
                        }
                    
                
            
                export default appVv
            
        

Circular Fab Buttons

Contributor:@oberocks
            
                // ./src/app.vv.ts

                import { VvConfig } from '@obewds/vueventus'
                import type { ConfigVv } from '@obewds/vueventus'

                let appVv: ConfigVv = VvConfig
            
        
                    
                        const addFabRounding = (string: string): string => {
                            return string + ' rounded-full'
                        }
                        
                        appVv.buttons.fabSizes = {
                            '4xs': addFabRounding(appVv.buttons.fabSizes['4xs']),
                            '3xs': addFabRounding(appVv.buttons.fabSizes['3xs']),
                            '2xs': addFabRounding(appVv.buttons.fabSizes['2xs']),
                             'xs': addFabRounding(appVv.buttons.fabSizes['xs']),
                             'sm': addFabRounding(appVv.buttons.fabSizes['sm']),
                             'md': addFabRounding(appVv.buttons.fabSizes['md']),
                             'lg': addFabRounding(appVv.buttons.fabSizes['lg']),
                             'xl': addFabRounding(appVv.buttons.fabSizes['xl']),
                            '2xl': addFabRounding(appVv.buttons.fabSizes['2xl']),
                            '3xl': addFabRounding(appVv.buttons.fabSizes['3xl']),
                            '4xl': addFabRounding(appVv.buttons.fabSizes['4xl']),
                        }
                    
                
            
                export default appVv