40 lines
1.0 KiB
Vue
40 lines
1.0 KiB
Vue
|
<template>
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
class="flex h-9 w-9 shrink-0 items-center justify-center rounded-full transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500/50 disabled:pointer-events-none disabled:opacity-50"
|
||
|
|
:class="variantClasses"
|
||
|
|
:aria-label="label"
|
||
|
|
:disabled="disabled"
|
||
|
|
@click="emit('click', $event)"
|
||
|
|
>
|
||
|
|
<AppIcon :name="icon" size="sm" />
|
||
|
|
</button>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang="ts">
|
||
|
|
import { computed } from 'vue';
|
||
|
|
import AppIcon from '@/components/ui/AppIcon.vue';
|
||
|
|
import type { AppIconName } from '@/types/icons';
|
||
|
|
|
||
|
|
const props = withDefaults(
|
||
|
|
defineProps<{
|
||
|
|
icon: AppIconName;
|
||
|
|
label: string;
|
||
|
|
variant?: 'default' | 'danger';
|
||
|
|
disabled?: boolean;
|
||
|
|
}>(),
|
||
|
|
{
|
||
|
|
variant: 'default',
|
||
|
|
disabled: false,
|
||
|
|
},
|
||
|
|
);
|
||
|
|
|
||
|
|
const emit = defineEmits<{ click: [event: MouseEvent] }>();
|
||
|
|
|
||
|
|
const variantClasses = computed(() =>
|
||
|
|
props.variant === 'danger'
|
||
|
|
? 'text-muted hover:bg-red-500/10 hover:text-red-600'
|
||
|
|
: 'text-muted hover:bg-surface-3 hover:text-text',
|
||
|
|
);
|
||
|
|
</script>
|