Modulist Vue

Button development

Example

<v-button appearance="default">Default</v-button>
<v-button appearance="primary">Primary</v-button>
<v-button appearance="alternative">Alternative</v-button>
<v-button appearance="subtle">Subtle</v-button>
<v-button appearance="success">Success</v-button>
<v-button appearance="danger">Danger</v-button>
1
2
3
4
5
6

Loading

<v-button loading appearance="default">Default</v-button>
1

Disabled

<v-button disabled appearance="default">Default</v-button>
1

Icon & text

<v-button appearance="primary">
  Take a shot
  <template v-slot:icon>
    <!--icon here-->
  </template>
</v-button>
1
2
3
4
5
6

Icon first

<v-button icon-first appearance="primary">
  Take a shot
  <template v-slot:icon>
    <!--icon here-->
  </template>
</v-button>
1
2
3
4
5
6

Icon only

<v-button disabled appearance="default">Default</v-button>
1

Sizes

<v-button size="0" appearance="default">Default</v-button>
<v-button size="1" appearance="default">Default</v-button>
<v-button size="2" appearance="default">Default</v-button>
<v-button size="3" appearance="default">Default</v-button>
<v-button size="4" appearance="default">Default</v-button>
1
2
3
4
5

Props

Name Type Description Default
type String Button type, 'button' or 'submit' button
appearance String There are 6 options: ['default', 'primary', 'alternative', 'subtle', 'success', 'danger'] default
size String Button size, ['1', '2', '3', '4'] '3'
disabled Boolean Whether button disabled or not false
loading Boolean Whether button in loading state or not false
icon-first Boolean Set to true if you want to render icon before text false
inverted Boolean Set to true in order to use button on dark background false

Slots

Name Slot props Description
default None Button content
icon None For icon

← Checkbox →