diff --git a/src/components/v-button/readme.md b/src/components/v-button/readme.md
index fee97d1bda..957509d31a 100644
--- a/src/components/v-button/readme.md
+++ b/src/components/v-button/readme.md
@@ -47,20 +47,22 @@ The loading slot is rendered _on top_ of the content that was there before. Make
## Props
-| Prop | Description | Default |
-|------------|---------------------------------------------------------------------------|----------|
-| `block` | Enable full width (display block) | `false` |
-| `icon` | Remove padding / min-width. Meant to be used with just an icon as content | `false` |
-| `outlined` | No background | `false` |
-| `rounded` | Enable rounded corners | `false` |
-| `type` | HTML `type` attribute | `button` |
-| `disabled` | Disabled state | `false` |
-| `loading` | Loading state | `false` |
-| `x-small` | Render extra small | `false` |
-| `small` | Render small | `false` |
-| `large` | Render large | `false` |
-| `x-large` | Render extra large | `false` |
-| `to` | Render as vue router-link | `false` |
+| Prop | Description | Default |
+|------------|---------------------------------------------------------------------------|------------|
+| `block` | Enable full width (display block) | `false` |
+| `icon` | Remove padding / min-width. Meant to be used with just an icon as content | `false` |
+| `outlined` | No background | `false` |
+| `rounded` | Enable rounded corners | `false` |
+| `type` | HTML `type` attribute | `'button'` |
+| `disabled` | Disabled state | `false` |
+| `loading` | Loading state | `false` |
+| `x-small` | Render extra small | `false` |
+| `small` | Render small | `false` |
+| `large` | Render large | `false` |
+| `x-large` | Render extra large | `false` |
+| `to` | Render as vue router-link | `false` |
+| `align` | Align content in button. One of `left | center | right` | `'center'` |
+| `dashed` | Render the border dashed. Meant to be used with `outlined`. | `false` |
## Slots
diff --git a/src/components/v-button/v-button.story.ts b/src/components/v-button/v-button.story.ts
index 7b0167895b..1a635e142c 100644
--- a/src/components/v-button/v-button.story.ts
+++ b/src/components/v-button/v-button.story.ts
@@ -4,6 +4,7 @@ import {
boolean,
number,
color,
+ select,
optionsKnob as options,
} from '@storybook/addon-knobs';
import { action } from '@storybook/addon-actions';
@@ -14,6 +15,8 @@ import markdown from './readme.md';
import withPadding from '../../../.storybook/decorators/with-padding';
import VueRouter from 'vue-router';
+import { defineComponent } from '@vue/composition-api';
+
Vue.component('v-button', VButton);
Vue.component('v-icon', VIcon);
Vue.use(VueRouter);
@@ -35,6 +38,9 @@ export const withText = () => ({
text: {
default: text('Text in button', 'Click me'),
},
+ align: {
+ default: select('Align', ['left', 'center', 'right'], 'center', 'Button'),
+ },
block: {
default: boolean('Block', false, 'Button'),
},
@@ -47,6 +53,12 @@ export const withText = () => ({
outlined: {
default: boolean('Outlined', false, 'Button'),
},
+ dashed: {
+ default: boolean('Dashed', false, 'Button'),
+ },
+ fullWidth: {
+ default: boolean('Full-width', false, 'Button'),
+ },
type: {
default: text('Type attribute', 'button', 'Button'),
},
@@ -94,6 +106,8 @@ export const withText = () => ({
:block="block"
:rounded="rounded"
:outlined="outlined"
+ :align="align"
+ :dashed="dashed"
:icon="icon"
:style="{
'--v-button-color': color,
@@ -109,6 +123,7 @@ export const withText = () => ({
:small="size === 'small'"
:large="size === 'large'"
:x-large="size === 'xLarge'"
+ :full-width="fullWidth"
@click="onClick"
>
{{ text }}
@@ -313,3 +328,17 @@ export const asLink = () => ({
I'm a link
`,
});
+
+export const addNewStyle = () =>
+ defineComponent({
+ template: `
+
+ Add new row
+
+ `,
+ });
diff --git a/src/components/v-button/v-button.vue b/src/components/v-button/v-button.vue
index 361a402635..6d67848500 100644
--- a/src/components/v-button/v-button.vue
+++ b/src/components/v-button/v-button.vue
@@ -6,7 +6,17 @@
class="v-button"
:class="[
sizeClass,
- { 'full-width': fullWidth, rounded, icon, outlined, loading, secondary, active },
+ `align-${align}`,
+ {
+ 'full-width': fullWidth,
+ rounded,
+ icon,
+ outlined,
+ loading,
+ secondary,
+ active,
+ dashed,
+ },
]"
:type="type"
:disabled="disabled"
@@ -76,6 +86,15 @@ export default defineComponent({
type: [Number, String],
default: null,
},
+ dashed: {
+ type: Boolean,
+ default: false,
+ },
+ align: {
+ type: String,
+ default: 'center',
+ validator: (val: string) => ['left', 'center', 'right'].includes(val),
+ },
...sizeProps,
},
setup(props, { emit }) {
@@ -113,7 +132,6 @@ export default defineComponent({
position: relative;
display: inline-flex;
align-items: center;
- justify-content: center;
width: var(--v-button-width);
min-width: 78px;
height: var(--v-button-height);
@@ -129,6 +147,18 @@ export default defineComponent({
transition: var(--fast) var(--transition);
transition-property: background-color border;
+ &.align-left {
+ justify-content: flex-start;
+ }
+
+ &.align-center {
+ justify-content: center;
+ }
+
+ &.align-right {
+ justify-content: flex-end;
+ }
+
&.secondary {
--v-button-color: var(--button-secondary-foreground-color);
--v-button-color-hover: var(--button-secondary-foreground-color-hover);
@@ -158,11 +188,6 @@ export default defineComponent({
}
}
- &.full-width {
- display: flex;
- min-width: 100%;
- }
-
&.rounded {
border-radius: calc(var(--v-button-height) / 2);
}
@@ -173,6 +198,10 @@ export default defineComponent({
background-color: transparent;
}
+ &.dashed {
+ border-style: dashed;
+ }
+
&.x-small {
--v-button-height: 28px;
--v-button-font-size: 12px;
@@ -210,6 +239,11 @@ export default defineComponent({
padding: 0;
}
+ &.full-width {
+ display: flex;
+ min-width: 100%;
+ }
+
.content,
.spinner {
max-width: 100%;