Button

1<script setup lang="ts">2import { Button } from '@vitral/vue';3 4const severities = ['primary', 'secondary', 'success', 'info', 'warn', 'danger', 'help', 'contrast'] as const;5</script>6 7<template>8    <Button v-for="s in severities" :key="s" :label="s" :severity="s" />9</template>

1<script setup lang="ts">2import { Button } from '@vitral/vue';3 4const severities = ['primary', 'secondary', 'success', 'info', 'warn', 'danger', 'help', 'contrast'] as const;5</script>6 7<template>8    <Button v-for="s in severities" :key="s" :label="s" :severity="s" variant="outlined" />9</template>

1<script setup lang="ts">2import { Button } from '@vitral/vue';3 4const severities = ['primary', 'secondary', 'success', 'info', 'warn', 'danger', 'help', 'contrast'] as const;5</script>6 7<template>8    <Button v-for="s in severities" :key="s" :label="s" :severity="s" variant="text" />9</template>

1<script setup lang="ts">2import { Button } from '@vitral/vue';3</script>4 5<template>6    <Button label="New" icon="plus" />7    <Button label="Next" icon="arrowRight" icon-pos="right" severity="secondary" />8    <Button label="Upload" icon="upload" icon-pos="top" severity="secondary" variant="outlined" />9    <Button icon="search" aria-label="Search" />10    <Button icon="trash" severity="danger" variant="text" aria-label="Delete" />11    <Button icon="star" rounded severity="warn" aria-label="Favourite" />12</template>

1<script setup lang="ts">2import { graduationCap } from '@vitral/icons';3import { Button } from '@vitral/vue';4import { h } from 'vue';5 6// Stands in for another library's icon component (lucide-vue-next, @iconify/vue…).7const Sparkle = () =>8    h('svg', { viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', 'stroke-linecap': 'round', 'stroke-linejoin': 'round' }, [9        h('path', { d: 'M12 3v4M12 17v4M3 12h4M17 12h4M6 6l2.5 2.5M15.5 15.5L18 18M6 18l2.5-2.5M15.5 8.5L18 6' })10    ]);11const markup = '<svg viewBox="0 0 24 24" fill="currentColor"><circle cx="12" cy="12" r="6"/></svg>';12</script>13 14<template>15    <Button label="Course" :icon="graduationCap" severity="secondary" />16    <Button label="Component" :icon="Sparkle" severity="secondary" />17    <Button label="Markup" :icon="markup" severity="secondary" />18</template>

1<script setup lang="ts">2import { Button } from '@vitral/vue';3</script>4 5<template>6    <Button label="Small" size="small" />7    <Button label="Normal" />8    <Button label="Large" size="large" />9    <Button label="Rounded" rounded severity="help" />10    <Button label="Raised" raised severity="secondary" />11</template>

1<script setup lang="ts">2import { Button } from '@vitral/vue';3import { ref } from 'vue';4 5const loading = ref(false);6 7function load() {8    loading.value = true;9    setTimeout(() => (loading.value = false), 1600);10}11</script>12 13<template>14    <Button label="Save" icon="check" :loading="loading" @click="load" />15    <Button label="Disabled" disabled />16    <Button label="Notifications" icon="bell" badge="8" severity="secondary" />17    <Button as="a" href="https://github.com/vitralui/vitral" target="_blank" label="A link" icon="externalLink" icon-pos="right" variant="link" />18</template>