feat: button loading, disabled(WIP), refactor to useButtonClasses, Spinner and vitest
This commit is contained in:
22
docs/guide/button/examples/ButtonIconExample.vue
Normal file
22
docs/guide/button/examples/ButtonIconExample.vue
Normal file
@@ -0,0 +1,22 @@
|
||||
<template>
|
||||
<div class="inline-flex align-center gap-2 flex-wrap">
|
||||
<Button gradient="purple-blue" square>
|
||||
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
|
||||
</Button>
|
||||
<Button color="default" pill square>
|
||||
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
|
||||
</Button>
|
||||
<Button gradient="green-blue" square>
|
||||
Close something
|
||||
</Button>
|
||||
<Button color="default" pill outline square>
|
||||
Open something
|
||||
<template #suffix>
|
||||
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
|
||||
</template>
|
||||
</Button>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { Button } from '../../../../src/index'
|
||||
</script>
|
||||
Reference in New Issue
Block a user