VueVentus DocsVvButton Component
The VvButton Component provides a variety of props and config module based settings to make a huge variety of buttons for applications with extremely DRY implementation of atomic classes.
Import
To import a VvButton Component installed by the vueventus CLI or vv-update CLI:
// ./src/components/SomeComponent.vue
import VvButton from './vv/buttons/VvButton.vue'2
TIP
CLI installed components pass through VueVentus defaults via component props. Each prop default value can be customized globally by overriding VvConfig defaults in your app ./src/app.vv.ts file or singularly in a component instance.
Alternatively, you can install the raw library VvButton Component with:
import { VvButton } from '@obewds/vueventus'TIP
Importing raw VueVentus library components will still apply your ./src/app.vv.ts settings automatically through the Vue provide() and inject() pattern. All raw VueVentus library components automatically check for a provided "vv" keyed object with a ConfigVv type interface.
CLI or Raw?
The main difference between raw library components and CLI installed components, is that you have no control over component defaults with raw library components. This is less flexible than using CLI installed components, because control of component defaults can greatly reduce the number of props a dev has to type for component instances, which reduces app code.
Meanwhile, the control CLI installed components provide through customizable defaults, opens up to a global level (styling management system) control for default component state characteristic values (particularly powerful with color and proportional size characteristics).
Prop: block
Type: Boolean
Default: false
The VvButton Component block prop sets the component instance to use block-level base classes making the returned <button> element a full width and block-level element.
Syntax:
<VvButton :block="true">
VvButton
</VvButton>2
3
Result:
Prop: color
Type: String as PropType<keyof DefaultPaletteColors>
Default: "primary"
The VvButton Component color prop sets the component instance color based both on the color prop and the palette prop value together.
Syntax:
<VvButton color="error">
VvButton
</VvButton>2
3
Result:
color prop default color examples
Downstream Typescript Prop Typing:
Coming Soon!
Prop: debug
Type: Boolean
Default: false
The VvButton Component debug prop toggles the debugging state of a component instance. When in debugging mode, each component instance prop value can be viewed through data-vv-button- prefixed HTML attributes.
Syntax:
<VvButton :debug="true">
VvButton debug
</VvButton>2
3
Result:
Prop: fab
Type: Boolean
Default: false
The VvButton Component fab prop sets the component instance to use base classes with equal width and height classes making the returned <button> element a square button element that can also be styled as a circle using a Tailwind CSS .rounded-full class.
Syntax:
<VvButton :fab="true">
+
</VvButton>
<VvButton :fab="true" class="rounded-full">
+
</VvButton>2
3
4
5
6
7
Result:
Prop: palette
Type: String
Default: "solid"
The VvButton Component palette prop sets the component instance color based both on the palette prop and the color prop values together.
Syntax:
<VvButton palette="outline">
VvButton
</VvButton>2
3
Result:
color prop default palette color examples
color prop outline palette color examples
Downstream Typescript Prop Typing:
Coming Soon!
Prop: size
Type: String
Default: "md"
The VvButton Component size prop sets the component instance size-based classes which in the context of buttons typically involves padding and font size atomic classes.
Syntax:
<VvButton size="xl">
VvButton
</VvButton>2
3
Result:
size prop button size examples
size prop block button size examples
Downstream Typescript Prop Typing:
Coming Soon!
Prop: type
Type: String
Valid Values: ValidButtonTypes Module
Default: "button"
The VvButton Component type prop sets the button HTML type attribute to a value that should be present in the ValidButtonTypes Module to be a valid value for this component.
Syntax:
<VvButton type="submit">
Submit
</VvButton>2
3
Result:
Downstream Typescript Prop Typing:
Coming Soon!
Slot: #default
The VvButton Component has a standard #default Vue slot to insert child elements/nodes into the component.
Syntax:
<VvButton>
Slot<span class="text-yellow-300 pl-2">Content</span>
</VvButton>2
3