Documentation

Buttons

Basic Button

Click Count: 0

Show Code
<ks-button @click.prevent.stop="click_count++">Basic button</ks-button>

Loading Button

Spinning: false

Show Code
<ks-button
    :spin="spinning"
    @click.prevent="spinning = !spinning"
>
    Spinning button
</ks-button>

Loading Button smaller size

Spinning (small): false

Show Code
<ks-button
    :spin="spinning"
    @click.prevent="spinSmall = !spinSmall"
    spin-size="tiny"
>
    ✓
</ks-button>

Loading Button in modal

Spinning: false

Show Code
<ks-button @click="$refs.modal.open()">Open Modal</ks-button>
<ks-modal ref="modal">
    <div slot="footer">
        <ks-button @click.prevent="spinModal = true" :spin="spinModal">Yes</ks-button>
        <ks-button :outline="true" @click.prevent="spinModal = false">Stop</ks-button>
    </div>
</ks-modal>

Props
Events

Name	Type	Default	Description
disabled	Boolean	false	Whether the button is disabled or not
danger	Boolean	false	Styles the button with the danger style (red)
outline	Boolean	false	Styles the button with the outline style
spin	Boolean	false	Shows the spinner on the button
spinColor	String	null	The color of the spinner
spinSize	String	small	The size of the button spinner (small, tiny). Tiny is helpful for smaller width buttons
tiny	Boolean	false	Changes the size of the button
small	Boolean	false	Changes the size of the button
large	Boolean	false	Changes the size of the button

Buttons

Basic Button

Loading Button

Loading Button smaller size

Loading Button in modal

Notification