83 lines
1.6 KiB
Vue
83 lines
1.6 KiB
Vue
<template>
|
|
<button
|
|
type="button"
|
|
:class="['icon-button', `icon-button--${variant}`, `icon-button--${size}`]"
|
|
:aria-label="label"
|
|
:title="label"
|
|
:disabled="disabled"
|
|
@click="$emit('click', $event)"
|
|
>
|
|
<Icon :name="icon" class="icon-button__icon" />
|
|
</button>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
withDefaults(
|
|
defineProps<{
|
|
/** Carbon icon name. */
|
|
icon: string
|
|
/** Accessible label / tooltip. */
|
|
label: string
|
|
variant?: "outline" | "ghost"
|
|
size?: "sm" | "md"
|
|
disabled?: boolean
|
|
}>(),
|
|
{ variant: "ghost", size: "md", disabled: false },
|
|
)
|
|
|
|
defineEmits<{
|
|
(e: "click", event: MouseEvent): void
|
|
}>()
|
|
</script>
|
|
|
|
<style scoped>
|
|
.icon-button {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border: 1.5px solid transparent;
|
|
background: transparent;
|
|
color: var(--neutral-70);
|
|
cursor: pointer;
|
|
border-radius: var(--radius-md);
|
|
transition: background 120ms ease;
|
|
}
|
|
|
|
.icon-button--sm {
|
|
width: 32px;
|
|
height: 32px;
|
|
}
|
|
.icon-button--sm .icon-button__icon {
|
|
width: 1.125rem;
|
|
height: 1.125rem;
|
|
}
|
|
|
|
.icon-button--md {
|
|
width: 40px;
|
|
height: 40px;
|
|
}
|
|
.icon-button--md .icon-button__icon {
|
|
width: 1.5rem;
|
|
height: 1.5rem;
|
|
}
|
|
|
|
.icon-button--outline {
|
|
border: 1.5px solid var(--border-default);
|
|
background: var(--neutral-0);
|
|
}
|
|
|
|
.icon-button:hover:not(:disabled) {
|
|
background: var(--surface-tint);
|
|
}
|
|
.icon-button:active:not(:disabled) {
|
|
transform: translateY(1px);
|
|
}
|
|
.icon-button:focus-visible {
|
|
outline: 2px solid var(--border-focus);
|
|
outline-offset: 2px;
|
|
}
|
|
.icon-button:disabled {
|
|
opacity: 0.4;
|
|
cursor: not-allowed;
|
|
}
|
|
</style>
|