Button
A fundamental inline element for interactivity
The button is a core interface element — it’s the primary way to indicate interactivity. The
<u-button> component is an extension of the standard
<button> element with tone, priority, sizing and loading support.
Default#
<template>
<section>
<u-button>Button</u-button>
</section>
</template>
States#
<template>
<section class="children:mb-2 children:mr-2 -mb-2">
<u-button tone="primary">Normal</u-button>
<u-button tone="primary" active>Active</u-button>
<u-button tone="primary" disabled>Disabled</u-button>
<u-button tone="primary" :loading="isLoading" @click="loadSomething">Loading</u-button>
</section>
</template>
<script>
export default {
data() {
return {
isLoading: false,
}
},
methods: {
loadSomething() {
this.isLoading = true
setTimeout(() => (this.isLoading = false), 3000)
},
},
}
</script>
Icons#
<template>
<section class="children:mb-2 children:mr-2 -mb-2">
<u-button tone="primary" circle>
<font-awesome-icon :icon="['fas', 'check']" />
</u-button>
<u-button tone="primary">
<template #prefix><font-awesome-icon :icon="['fas', 'check']" /></template>
Submit
</u-button>
<u-button tone="primary">
Submit
<template #suffix><font-awesome-icon :icon="['fas', 'check']" /></template>
</u-button>
</section>
</template>
Tones & Variants#
<template>
<section class="children:mb-2 children:mr-2 -mb-2">
<u-button tone="primary" variant="link">Link</u-button>
<u-button tone="primary" variant="ghost">Ghost</u-button>
<u-button tone="primary" variant="outline">Outline</u-button>
<u-button tone="primary" variant="subtle">Subtle</u-button>
<u-button tone="primary" variant="normal">Normal</u-button>
<u-button tone="primary" variant="bold">Bold</u-button>
<u-button tone="primary" variant="special">Special</u-button>
</section>
</template>
<template>
<section class="children:mb-2 children:mr-2 -mb-2">
<u-button tone="secondary" variant="ghost">Ghost</u-button>
<u-button tone="secondary" variant="outline">Outline</u-button>
<u-button tone="secondary" variant="subtle">Subtle</u-button>
<u-button tone="secondary" variant="normal">Normal</u-button>
<u-button tone="secondary" variant="bold">Bold</u-button>
<u-button tone="secondary" variant="special">Special</u-button>
</section>
</template>
<template>
<section class="children:mb-2 children:mr-2 -mb-2">
<u-button tone="tertiary" variant="ghost">Ghost</u-button>
<u-button tone="tertiary" variant="outline">Outline</u-button>
<u-button tone="tertiary" variant="subtle">Subtle</u-button>
<u-button tone="tertiary" variant="normal">Normal</u-button>
<u-button tone="tertiary" variant="bold">Bold</u-button>
<u-button tone="tertiary" variant="special">Special</u-button>
</section>
</template>
<template>
<section class="children:mb-2 children:mr-2 -mb-2">
<u-button tone="quaternary" variant="ghost">Ghost</u-button>
<u-button tone="quaternary" variant="outline">Outline</u-button>
<u-button tone="quaternary" variant="subtle">Subtle</u-button>
<u-button tone="quaternary" variant="normal">Normal</u-button>
<u-button tone="quaternary" variant="bold">Bold</u-button>
<u-button tone="quaternary" variant="special">Special</u-button>
</section>
</template>
<template>
<section class="children:mb-2 children:mr-2 -mb-2">
<u-button tone="neutral" variant="ghost">Ghost</u-button>
<u-button tone="neutral" variant="outline">Outline</u-button>
<u-button tone="neutral" variant="subtle">Subtle</u-button>
<u-button tone="neutral" variant="normal">Normal</u-button>
<u-button tone="neutral" variant="bold">Bold</u-button>
<u-button tone="neutral" variant="special">Special</u-button>
</section>
</template>
<template>
<section class="children:mb-2 children:mr-2 -mb-2">
<u-button tone="info" variant="ghost">Ghost</u-button>
<u-button tone="info" variant="outline">Outline</u-button>
<u-button tone="info" variant="subtle">Subtle</u-button>
<u-button tone="info" variant="normal">Normal</u-button>
<u-button tone="info" variant="bold">Bold</u-button>
<u-button tone="info" variant="special">Special</u-button>
</section>
</template>
<template>
<section class="children:mb-2 children:mr-2 -mb-2">
<u-button tone="positive" variant="ghost">Ghost</u-button>
<u-button tone="positive" variant="outline">Outline</u-button>
<u-button tone="positive" variant="subtle">Subtle</u-button>
<u-button tone="positive" variant="normal">Normal</u-button>
<u-button tone="positive" variant="bold">Bold</u-button>
<u-button tone="positive" variant="special">Special</u-button>
</section>
</template>
<template>
<section class="children:mb-2 children:mr-2 -mb-2">
<u-button tone="warning" variant="ghost">Ghost</u-button>
<u-button tone="warning" variant="outline">Outline</u-button>
<u-button tone="warning" variant="subtle">Subtle</u-button>
<u-button tone="warning" variant="normal">Normal</u-button>
<u-button tone="warning" variant="bold">Bold</u-button>
<u-button tone="warning" variant="special">Special</u-button>
</section>
</template>
<template>
<section class="children:mb-2 children:mr-2 -mb-2">
<u-button tone="critical" variant="ghost">Ghost</u-button>
<u-button tone="critical" variant="outline">Outline</u-button>
<u-button tone="critical" variant="subtle">Subtle</u-button>
<u-button tone="critical" variant="normal">Normal</u-button>
<u-button tone="critical" variant="bold">Bold</u-button>
<u-button tone="critical" variant="special">Special</u-button>
</section>
</template>
Sizes#
<template>
<section class="children:mb-2 children:mr-2 -mb-2">
<u-button tone="primary" size="xs">Extra Small</u-button>
<u-button tone="primary" size="sm">Small</u-button>
<u-button tone="primary" size="md">Medium</u-button>
<u-button tone="primary" size="lg">Large</u-button>
<hr />
<u-button tone="primary" block>Block</u-button>
</section>
</template>
Shapes#
<template>
<section class="children:mb-2 children:mr-2 -mb-2">
<u-button tone="primary" circle>
<font-awesome-icon :icon="['fas', 'check']" />
</u-button>
<u-button tone="primary"> Default </u-button>
<u-button tone="primary" square> Square </u-button>
</section>
</template>