Buttons Config Module

The Buttons Config Module holds your application's default/prototypal Tailwind CSS classes for Button elements in your application, excluding color and color palette classes (see Palette Config Modules for more info about palette modules).

app.vv.ts Use

You'll usually work with the Buttons Config Module after it's already been merged into VueVentus VvConfig data.

Here's what that generally looks like in practice in a real world app context:

javascript

// ./src/app.vv.ts

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

let appVv: ConfigVv = VvConfig

appVv.buttons.someProperty = 'some-value'

// ...

export default appVv

Import

However, if you need to import the compiled library version of the Buttons Config Module, you can use:

javascript

import { Buttons } from '@obewds/vueventus'

Buttons.blockDisplay

Type: String
Default: "block w-full flex flex-col items-center justify-center"

The Buttons.blockDisplay parameter is meant to isolate the CSS block level display characteristics and requirements for an application's block level styled button elements.

AVOID: COLOR & SIZE

Atomic classes for this property should avoid using classes related to characteristics like color and size, which are already abstracted in VueVentus.

Example

javascript

// ./src/app.vv.ts
appVv.buttons.blockDisplay = '...'

Buttons.blockSizes

Type: Object

Buttons.blockSizes Properties	Buttons.blockSizes Prop Values
`"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"`

Examples

javascript

// ./src/app.vv.ts
appVv.buttons.blockSizes = {
    '4xs': '...',
    '3xs': '...',
    '2xs': '...',
     'xs': '...',
     'sm': '...',
     'md': '...',
     'lg': '...',
     'xl': '...',
    '2xl': '...',
    '3xl': '...',
    '4xl': '...',
}

javascript

// ./src/app.vv.ts
appVv.buttons.blockSizes['4xs'] = '...'
appVv.buttons.blockSizes['3xs'] = '...'
appVv.buttons.blockSizes['2xs'] = '...'
appVv.buttons.blockSizes['xs']  = '...'
appVv.buttons.blockSizes['sm']  = '...'
appVv.buttons.blockSizes['md']  = '...'
appVv.buttons.blockSizes['lg']  = '...'
appVv.buttons.blockSizes['xl']  = '...'
appVv.buttons.blockSizes['2xl'] = '...'
appVv.buttons.blockSizes['3xl'] = '...'
appVv.buttons.blockSizes['4xl'] = '...'

Buttons.border

Type: String
Default: "border"

The Buttons.border parameter is meant to isolate the border related characteristics and requirements for an application's block level styled button elements, but not including any border color characteristic, which is considered a global element color palette characteristic in VueVentus.

AVOID: COLOR & SIZE

Atomic classes for this property should avoid using classes related to characteristics like color and size, which are already abstracted in VueVentus.

Example

javascript

// ./src/app.vv.ts
appVv.buttons.border = '...'

Buttons.cursor

Type: String
Default: "cursor-pointer"

The Buttons.cursor parameter is meant to isolate the CSS cursor orientated characteristics and requirements for an application's button elements.

AVOID: COLOR & SIZE

Atomic classes for this property should avoid using classes related to characteristics like color and size, which are already abstracted in VueVentus.

Example

javascript

// ./src/app.vv.ts
appVv.buttons.cursor = '...'

Buttons.disabled

Type: String
Default: "disabled:opacity-25"

The Buttons.disabled parameter is meant to isolate the disabled characteristics and requirements for an application's button elements. Disabled characteristics in the contexts of Tailwind CSS involve the disabled: modifier and the disabled HTML element attribute.

AVOID: COLOR & SIZE

Atomic classes for this property should avoid using classes related to characteristics like color and size, which are already abstracted in VueVentus.

Example

javascript

// ./src/app.vv.ts
appVv.buttons.disabled = '...'

Buttons.display

Type: String
Default: "inline-flex items-center"

The Buttons.display parameter is meant to isolate the CSS display/block level characteristics and requirements for an application's button elements.

AVOID: COLOR & SIZE

Atomic classes for this property should avoid using classes related to characteristics like color and size, which are already abstracted in VueVentus.

Example

javascript

// ./src/app.vv.ts
appVv.buttons.display = '...'

Buttons.fabDisplay

Type: String
Default: "inline-flex items-center items-center justify-center"

The Buttons.fabDisplay parameter is meant to isolate the CSS display/block level characteristics and requirements for an application's button elements when styled like a fab button.

AVOID: COLOR & SIZE

Atomic classes for this property should avoid using classes related to characteristics like color and size, which are already abstracted in VueVentus.

Example

javascript

// ./src/app.vv.ts
appVv.buttons.fabDisplay = '...'

Buttons.fabSizes

Type: Object

Buttons.fabSizes Properties	Buttons.fabSizes Prop Values
`"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"`

Examples

javascript

// ./src/app.vv.ts
appVv.buttons.fabSizes = {
    '4xs': '...',
    '3xs': '...',
    '2xs': '...',
     'xs': '...',
     'sm': '...',
     'md': '...',
     'lg': '...',
     'xl': '...',
    '2xl': '...',
    '3xl': '...',
    '4xl': '...',
}

javascript

// ./src/app.vv.ts
appVv.buttons.fabSizes['4xs'] = '...'
appVv.buttons.fabSizes['3xs'] = '...'
appVv.buttons.fabSizes['2xs'] = '...'
appVv.buttons.fabSizes['xs']  = '...'
appVv.buttons.fabSizes['sm']  = '...'
appVv.buttons.fabSizes['md']  = '...'
appVv.buttons.fabSizes['lg']  = '...'
appVv.buttons.fabSizes['xl']  = '...'
appVv.buttons.fabSizes['2xl'] = '...'
appVv.buttons.fabSizes['3xl'] = '...'
appVv.buttons.fabSizes['4xl'] = '...'

Buttons.focus

Type: String
Default: "focus:outline-none focus:ring focus:ring-opacity-50"

The Buttons.focus parameter is meant to isolate the CSS focus orientated characteristics and requirements for an application's button elements.

AVOID: COLOR & SIZE

Atomic classes for this property should avoid using classes related to characteristics like color and size, which are already abstracted in VueVentus.

Example

javascript

// ./src/app.vv.ts
appVv.buttons.focus = '...'

Buttons.rounding

Type: String
Default: ""

The Buttons.rounding parameter is meant to isolate the CSS border radius orientated characteristics and requirements for an application's button elements.

AVOID: COLOR & SIZE

Atomic classes for this property should avoid using classes related to characteristics like color and size, which are already abstracted in VueVentus.

Example

javascript

// ./src/app.vv.ts
appVv.buttons.rounding = '...'

Buttons.shadow

Type: String
Default: ""

The Buttons.shadow parameter is meant to isolate the Tailwind CSS drop-shadow orientated characteristics and requirements for an application's button elements.

AVOID: COLOR & SIZE

Atomic classes for this property should avoid using classes related to characteristics like color and size, which are already abstracted in VueVentus.

Example

javascript

// ./src/app.vv.ts
appVv.buttons.shadow = '...'

Buttons.sizes

Type: Object

Buttons.sizes Properties	Buttons.sizes Prop Values
`"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"`

Examples

javascript

// ./src/app.vv.ts
appVv.buttons.sizes = {
    '4xs': '...',
    '3xs': '...',
    '2xs': '...',
     'xs': '...',
     'sm': '...',
     'md': '...',
     'lg': '...',
     'xl': '...',
    '2xl': '...',
    '3xl': '...',
    '4xl': '...',
}

javascript

// ./src/app.vv.ts
appVv.buttons.sizes['4xs'] = '...'
appVv.buttons.sizes['3xs'] = '...'
appVv.buttons.sizes['2xs'] = '...'
appVv.buttons.sizes['xs']  = '...'
appVv.buttons.sizes['sm']  = '...'
appVv.buttons.sizes['md']  = '...'
appVv.buttons.sizes['lg']  = '...'
appVv.buttons.sizes['xl']  = '...'
appVv.buttons.sizes['2xl'] = '...'
appVv.buttons.sizes['3xl'] = '...'
appVv.buttons.sizes['4xl'] = '...'

Buttons.text

Type: String
Default: "font-semibold uppercase tracking-widest"

The Buttons.text parameter is meant to isolate the text specific atomic classes that don't pertain to already represented characteristics in VueVentus like color, size, etc. Instead, the Buttons.text parameter is meant for classes that would make button text unique from other text for more design/accessibility reasons.

AVOID: COLOR & SIZE

Atomic classes for this property should avoid using classes related to characteristics like color and size, which are already abstracted in VueVentus.

Example

javascript

// ./src/app.vv.ts
appVv.buttons.text = '...'

Buttons.transition

Type: String
Default: "transition-all ease-in-out duration-300"

The Buttons.transition parameter is meant to isolate the transition/animation specific atomic classes for an application's button elements.

Example

javascript

// ./src/app.vv.ts
appVv.buttons.transition = '...'

Buttons.base()

Returns: String
Default: "border cursor-pointer disabled:opacity-25 inline-flex items-center focus:outline-none focus:ring focus:ring-opacity-50 font-semibold uppercase tracking-widest transition-all ease-in-out duration-300"

The Buttons.base() method returns a joined String of the atomic classes within the various base properties of the Buttons Config Module object.

Example

html

<!-- ./src/components/SomeComponent.vue -->

<script setup lang="ts">

    import appVv from '../app.vv'
    
</script>

<template>

    <button type="button" :class="[appVv.buttons.base(), String(appVv.buttons.palettes.solid.primary)]">
        Solid Primary Btn
    </button>

</template>

Buttons.blockBase()

Returns: String
Default: "border cursor-pointer disabled:opacity-25 block w-full flex flex-col items-center justify-center focus:outline-none focus:ring focus:ring-opacity-50 font-semibold uppercase tracking-widest transition-all ease-in-out duration-300"

The Buttons.blockBase() method returns a joined String of the atomic classes within the various button mode base properties of the block-level variation of a button from the Buttons Config Module object.

Example

html

<!-- ./src/components/SomeComponent.vue -->

<script setup lang="ts">

    import appVv from '../app.vv'
    
</script>

<template>

    <button type="button" :class="appVv.buttons.blockBase()">
        Base Block-Level Button
    </button>

</template>

Buttons.blockClasses()

The Buttons.blockClasses() method returns a joined String of the atomic classes within the various blockBase properties of the Buttons Config Module object using the Buttons.blockBase() method under the hood.

However, the Buttons.blockClasses() method also returns Buttons.getBlockSizeClasses() method classes in addition to the blockBase property classes/values, which augments the returned value based on the optional argument value passed into the method.

Arguments

Args	Type	Status	Description
sizesKey	`String`	Optional	Property name/key of an Buttons.blockSizes object

The applicable values for the sizesKey argument are set via the Buttons.blockSizes property names/keys and atomic class values.

Examples

html

<!-- ./src/components/SomeComponent.vue -->

<script setup lang="ts">

    import appVv from '../app.vv'
    
</script>

<template>

    <button type="button" :class="appVv.buttons.blockClasses()">
        Default Sized Block Button
    </button>

    <button type="button" :class="appVv.buttons.blockClasses('lg')">
        Large Sized Block Button
    </button>

</template>

Buttons.classes()

The Buttons.classes() method returns a joined String of the atomic classes within the various base properties of the Buttons Config Module object using the Buttons.base() method under the hood.

However, the Buttons.classes() method also returns Buttons.getSizeClasses() method classes in addition to the base property classes/values, which augments the returned value based on the optional argument value passed into the method.

Arguments

Args	Type	Status	Description
sizesKey	`String`	Optional	Property name/key of an Buttons.sizes object

The applicable values for the sizesKey argument are set via the Buttons.sizes property names/keys and atomic class values.

Examples

html

<!-- ./src/components/SomeComponent.vue -->

<script setup lang="ts">

    import appVv from '../app.vv'
    
</script>

<template>

    <button type="button" :class="appVv.buttons.classes()">
        Default Sized Button
    </button>

    <button type="button" :class="appVv.buttons.classes('lg')">
        Large Sized Button
    </button>

</template>

Buttons.fabBase()

Returns: String
Default: "border cursor-pointer disabled:opacity-25 inline-flex items-center items-center justify-center focus:outline-none focus:ring focus:ring-opacity-50 font-semibold uppercase tracking-widest transition-all ease-in-out duration-300"

The Buttons.fabBase() method returns a joined String of the atomic classes within the various button mode base properties of the fab variation of a button from the Buttons Config Module object.

Example

html

<!-- ./src/components/SomeComponent.vue -->

<script setup lang="ts">

    import appVv from '../app.vv'
    
</script>

<template>

    <!-- Base Fab Button -->
    <button type="button" :class="appVv.buttons.fabBase()"/>

</template>

Buttons.fabClasses()

The Buttons.fabClasses() method returns a joined String of the atomic classes within the various fabBase properties of the Buttons Config Module object using the Buttons.fabBase() method under the hood.

However, the Buttons.fabClasses() method also returns Buttons.getFabSizeClasses() method classes in addition to the fabBase property classes/values, which augments the returned value based on the optional argument value passed into the method.

Arguments

Args	Type	Status	Description
sizesKey	`String`	Optional	Property name/key of an Buttons.fabSizes object

The applicable values for the sizesKey argument are set via the Buttons.fabSizes property names/keys and atomic class values.

Examples

html

<!-- ./src/components/SomeComponent.vue -->

<script setup lang="ts">

    import appVv from '../app.vv'
    
</script>

<template>

    <!-- Default Fab Button -->
    <button type="button" :class="appVv.buttons.fabClasses()"/>

    <!-- Large Fab Button -->
    <button type="button" :class="appVv.buttons.fabClasses('lg')"/>

</template>

Buttons.getBlockSizeClasses()

Returns: String
Default: "px-6 py-3 text-base"

The Buttons.getBlockSizeClasses() method returns text size related classes based on the optional argument value passed into the method. These size related classes come from the Buttons.blockSizes object property names/keys and values (of atomic classes).

Arguments

Args	Type	Status	Description
sizesKey	`String`	Optional	Property name/key of an Buttons.sizes object

The applicable values for the sizesKey argument are set via the Buttons.blockSizes property names/keys and atomic class values.

Examples

html

<!-- ./src/components/SomeComponent.vue -->

<script setup lang="ts">

    import appVv from '../app.vv'
    
</script>

<template>

    <button type="button" :class="appVv.buttons.getBlockSizeClasses()">
        Default Sized Block Button
    </button>

    <button type="button" :class="appVv.buttons.getBlockSizeClasses('sm')">
        Small Sized Block Button
    </button>

</template>

Buttons.getFabSizeClasses()

Returns: String
Default: "w-11 h-11 text-sm"

The Buttons.getFabSizeClasses() method returns text size related classes based on the optional argument value passed into the method. These size related classes come from the Buttons.fabSizes object property names/keys and values (of atomic classes).

Arguments

Args	Type	Status	Description
sizesKey	`String`	Optional	Property name/key of an Buttons.sizes object

The applicable values for the sizesKey argument are set via the Buttons.fabSizes property names/keys and atomic class values.

Examples

html

<!-- ./src/components/SomeComponent.vue -->

<script setup lang="ts">

    import appVv from '../app.vv'
    
</script>

<template>

    <!-- Default Sized Fab Button -->
    <button type="button" :class="appVv.buttons.getFabSizeClasses()"/>

    <!-- Small Sized Fab Button -->
    <button type="button" :class="appVv.buttons.getFabSizeClasses('sm')"/>

</template>

Buttons.getSizeClasses()

Returns: String
Default: "px-4 py-2 text-sm"

The Buttons.getSizeClasses() method returns text size related classes based on the optional argument value passed into the method. These size related classes come from the Buttons.sizes object property names/keys and values (of atomic classes).

Arguments

Args	Type	Status	Description
sizesKey	`String`	Optional	Property name/key of an Buttons.sizes object

The applicable values for the sizesKey argument are set via the Buttons.sizes property names/keys and atomic class values.

Examples

html

<!-- ./src/components/SomeComponent.vue -->

<script setup lang="ts">

    import appVv from '../app.vv'
    
</script>

<template>

    <button type="button" :class="appVv.buttons.getSizeClasses()">
        Default Sized Button
    </button>

    <button type="button" :class="appVv.buttons.getSizeClasses('sm')">
        Small Sized Button
    </button>

</template>

Module Code

// ./src/configs/Buttons.ts

import type { ConfigButtons } from '../types/ConfigButtons'
import Transitions from './Transitions.js'

export default <ConfigButtons>{
    border: 'border',
    cursor: 'cursor-pointer',
    disabled: 'disabled:opacity-25',
    display: 'inline-flex items-center',
    focus: 'focus:outline-none focus:ring focus:ring-opacity-50',
    rounding: '',
    shadow: '',
    text: 'font-semibold uppercase tracking-widest',
    transition: Transitions.classes('all', 'inOut', '300'),
    base: function () {
        return [
            this.border,
            this.cursor,
            this.disabled,
            this.display,
            this.focus,
            this.rounding,
            this.shadow,
            this.text,
            this.transition,
        ].join(' ').replace(/\s+/g,' ').trim()
    },
    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',
    },
    getSizeClasses: function (sizesKey) {
        const key = sizesKey && this.sizes[sizesKey] ? sizesKey : 'md'
        return this.sizes[key]
    },
    classes: function (sizesKey) {
        const sizes = sizesKey ? sizesKey : ''
        return [
            this.base(),
            this.getSizeClasses(sizes),
        ].join(' ').replace(/\s+/g,' ').trim()
    },
    blockDisplay: 'block w-full flex flex-col items-center justify-center',
    blockBase: function () {
        return [
            this.border,
            this.cursor,
            this.disabled,
            this.blockDisplay,
            this.focus,
            this.rounding,
            this.shadow,
            this.text,
            this.transition,
        ].join(' ').replace(/\s+/g,' ').trim()
    },
    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',
    },
    getBlockSizeClasses: function (sizesKey) {
        const key = sizesKey && this.blockSizes[sizesKey] ? sizesKey : 'md'
        return this.blockSizes[key]
    },
    blockClasses: function (sizesKey) {
        const sizes = sizesKey ? sizesKey : ''
        return [
            this.blockBase(),
            this.getBlockSizeClasses(sizes),
        ].join(' ').replace(/\s+/g,' ').trim()
    },
    fabDisplay: 'inline-flex items-center items-center justify-center',
    fabBase: function () {
        return [
            this.border,
            this.cursor,
            this.disabled,
            this.fabDisplay,
            this.focus,
            this.rounding,
            this.shadow,
            this.text,
            this.transition,
        ].join(' ').replace(/\s+/g,' ').trim()
    },
    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',
    },
    getFabSizeClasses: function (sizesKey) {
        const key = sizesKey && this.fabSizes[sizesKey] ? sizesKey : 'md'
        return this.fabSizes[key]
    },
    fabClasses: function (sizesKey) {
        const sizes = sizesKey ? sizesKey : ''
        return [
            this.fabBase(),
            this.getFabSizeClasses(sizes),
        ].join(' ').replace(/\s+/g,' ').trim()
    },
}

Buttons Config Module ​

app.vv.ts Use ​

Import ​

Buttons.blockDisplay ​

Example ​

Buttons.blockSizes ​

Examples ​

Buttons.border ​

Example ​

Buttons.cursor ​

Example ​

Buttons.disabled ​

Example ​

Buttons.display ​

Example ​

Buttons.fabDisplay ​

Example ​

Buttons.fabSizes ​

Examples ​

Buttons.focus ​

Example ​

Buttons.rounding ​

Example ​

Buttons.shadow ​

Example ​

Buttons.sizes ​

Examples ​

Buttons.text ​

Example ​

Buttons.transition ​

Example ​

Buttons.base() ​

Example ​

Buttons.blockBase() ​

Example ​

Buttons.blockClasses() ​

Arguments ​

Examples ​

Buttons.classes() ​

Arguments ​

Examples ​

Buttons.fabBase() ​

Example ​

Buttons.fabClasses() ​

Arguments ​

Examples ​

Buttons.getBlockSizeClasses() ​

Arguments ​

Examples ​

Buttons.getFabSizeClasses() ​

Arguments ​

Examples ​

Buttons.getSizeClasses() ​

Arguments ​

Examples ​

Module Code ​

Buttons Config Module

app.vv.ts Use

Import

Buttons.blockDisplay

Example

Buttons.blockSizes

Examples

Buttons.border

Example

Buttons.cursor

Example

Buttons.disabled

Example

Buttons.display

Example

Buttons.fabDisplay

Example

Buttons.fabSizes

Examples

Buttons.focus

Example

Buttons.rounding

Example

Buttons.shadow

Example

Buttons.sizes

Examples

Buttons.text

Example

Buttons.transition

Example

Buttons.base()

Example

Buttons.blockBase()

Example

Buttons.blockClasses()

Arguments

Examples

Buttons.classes()

Arguments

Examples

Buttons.fabBase()

Example

Buttons.fabClasses()

Arguments

Examples

Buttons.getBlockSizeClasses()

Arguments

Examples

Buttons.getFabSizeClasses()

Arguments

Examples

Buttons.getSizeClasses()

Arguments

Examples

Module Code