Button
A button element that can act as a link or trigger an action.
Demo
Related Components
This requires the following components to be installed:
Related Composables
This requires the following composables to be installed:
Related Utils
This requires the following utils to be installed:
Related Theme
This requires the following theme to be installed:
Component
vue
<script lang="ts">
import type { AvatarProps } from '@/ui/components/Avatar.vue'
import type { LinkProps } from '@/ui/components/Link.vue'
import type { UseComponentIconsProps } from '@/ui/composables/useComponentIcons'
import type { VariantProps } from 'tailwind-variants'
import Avatar from '@/ui/components/Avatar.vue'
import Icon from '@/ui/components/Icon.vue'
import Link from '@/ui/components/Link.vue'
import { useButtonGroup } from '@/ui/composables/useButtonGroup'
import { useComponentIcons } from '@/ui/composables/useComponentIcons'
import { loadingIcon } from '@/ui/icons'
import theme from '@/ui/theme/button'
import { omit } from '@/ui/utils/omit'
import { pickLinkProps } from '@/ui/utils/pick-link-props'
import { useForwardProps } from 'reka-ui'
import { tv } from 'tailwind-variants'
import { computed } from 'vue'
const button = tv(theme)
type ButtonVariants = VariantProps<typeof button>
export interface ButtonProps extends UseComponentIconsProps, Omit<LinkProps, 'raw' | 'custom'> {
label?: string
color?: ButtonVariants['color']
variant?: ButtonVariants['variant']
size?: ButtonVariants['size']
square?: boolean
block?: boolean
onClick?: ((e: MouseEvent) => void | Promise<void>) | Array<((e: MouseEvent) => void | Promise<void>)>
class?: any
ui?: Partial<typeof button.slots>
}
export interface ButtonSlots {
leading: (props?: object) => any
default: (props?: object) => any
trailing: (props?: object) => any
loading: (props?: object) => any
}
</script>
<script setup lang="ts">
const props = defineProps<ButtonProps>()
const slots = defineSlots<ButtonSlots>()
const linkProps = useForwardProps(pickLinkProps(props))
const { orientation, size: buttonSize } = useButtonGroup<ButtonProps>(props)
const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(() => props)
const ui = computed(() => button({
color: props.color,
variant: props.variant,
size: buttonSize.value,
loading: props.loading,
block: props.block,
square: props.square || (!slots.default && !props.label),
leading: props.leading,
trailing: props.trailing,
buttonGroup: orientation.value,
}))
</script>
<template>
<Link
:type="type"
:disabled="disabled || loading"
v-bind="omit(linkProps, ['type', 'disabled'])"
:class="ui.base({ class: [props.class, props.ui?.base] })"
raw
>
<slot name="leading">
<Icon v-if="isLeading" :name="leadingIconName" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
<Avatar v-else-if="!!avatar" :size="((props.ui?.leadingAvatarSize || ui.leadingAvatarSize()) as AvatarProps['size'])" v-bind="avatar" :class="ui.leadingAvatar({ class: props.ui?.leadingAvatar })" />
</slot>
<slot>
<span v-if="label" :class="ui.label({ class: props.ui?.label })">
{{ label }}
</span>
</slot>
<slot name="trailing">
<Icon v-if="isTrailing" :name="trailingIconName" :class="ui.trailingIcon({ class: props.ui?.trailingIcon })" />
</slot>
<slot name="loading">
<Icon v-if="loading" :name="loadingIcon" :class="ui.loadingIcon({ class: props.ui?.loadingIcon })" />
</slot>
</Link>
</template>vue
<script lang="ts">
import type { AvatarProps } from '@/UI/Components/Avatar.vue'
import type { LinkProps } from '@/UI/Components/Link.vue'
import type { UseComponentIconsProps } from '@/UI/Composables/useComponentIcons'
import type { VariantProps } from 'tailwind-variants'
import Avatar from '@/UI/Components/Avatar.vue'
import Icon from '@/UI/Components/Icon.vue'
import Link from '@/UI/Components/Link.vue'
import { useButtonGroup } from '@/UI/Composables/useButtonGroup'
import { useComponentIcons } from '@/UI/Composables/useComponentIcons'
import { loadingIcon } from '@/UI/icons'
import theme from '@/UI/Theme/button'
import { omit } from '@/UI/Utils/omit'
import { pickLinkProps } from '@/UI/Utils/pick-link-props'
import { useForwardProps } from 'reka-ui'
import { tv } from 'tailwind-variants'
import { computed } from 'vue'
const button = tv(theme)
type ButtonVariants = VariantProps<typeof button>
export interface ButtonProps extends UseComponentIconsProps, Omit<LinkProps, 'raw' | 'custom'> {
label?: string
color?: ButtonVariants['color']
variant?: ButtonVariants['variant']
size?: ButtonVariants['size']
square?: boolean
block?: boolean
onClick?: ((e: MouseEvent) => void | Promise<void>) | Array<((e: MouseEvent) => void | Promise<void>)>
class?: any
ui?: Partial<typeof button.slots>
}
export interface ButtonSlots {
leading: (props?: object) => any
default: (props?: object) => any
trailing: (props?: object) => any
loading: (props?: object) => any
}
</script>
<script setup lang="ts">
const props = defineProps<ButtonProps>()
const slots = defineSlots<ButtonSlots>()
const linkProps = useForwardProps(pickLinkProps(props))
const { orientation, size: buttonSize } = useButtonGroup<ButtonProps>(props)
const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(() => props)
const ui = computed(() => button({
color: props.color,
variant: props.variant,
size: buttonSize.value,
loading: props.loading,
block: props.block,
square: props.square || (!slots.default && !props.label),
leading: props.leading,
trailing: props.trailing,
buttonGroup: orientation.value,
}))
</script>
<template>
<Link
:type="type"
:disabled="disabled || loading"
v-bind="omit(linkProps, ['type', 'disabled'])"
:class="ui.base({ class: [props.class, props.ui?.base] })"
raw
>
<slot name="leading">
<Icon v-if="isLeading" :name="leadingIconName" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
<Avatar v-else-if="!!avatar" :size="((props.ui?.leadingAvatarSize || ui.leadingAvatarSize()) as AvatarProps['size'])" v-bind="avatar" :class="ui.leadingAvatar({ class: props.ui?.leadingAvatar })" />
</slot>
<slot>
<span v-if="label" :class="ui.label({ class: props.ui?.label })">
{{ label }}
</span>
</slot>
<slot name="trailing">
<Icon v-if="isTrailing" :name="trailingIconName" :class="ui.trailingIcon({ class: props.ui?.trailingIcon })" />
</slot>
<slot name="loading">
<Icon v-if="loading" :name="loadingIcon" :class="ui.loadingIcon({ class: props.ui?.loadingIcon })" />
</slot>
</Link>
</template>Theme
ts
import { buttonGroupVariant } from '@/ui/theme/button-group'
export default {
slots: {
base: '',
label: '',
leadingIcon: '',
leadingAvatar: '',
leadingAvatarSize: '',
trailingIcon: '',
loadingIcon: '',
},
variants: {
...buttonGroupVariant,
color: {
primary: '',
secondary: '',
success: '',
info: '',
warning: '',
error: '',
neutral: '',
},
variant: {
solid: '',
outline: '',
soft: '',
subtle: '',
ghost: '',
link: '',
},
size: {
xs: {
base: '',
leadingIcon: '',
leadingAvatarSize: '',
trailingIcon: '',
loadingIcon: '',
},
sm: {
base: '',
leadingIcon: '',
leadingAvatarSize: '',
trailingIcon: '',
ladingIcon: '',
},
md: {
base: '',
leadingIcon: '',
leadingAvatarSize: '',
trailingIcon: '',
loadingIcon: '',
},
lg: {
base: '',
leadingIcon: '',
leadingAvatarSize: '',
trailingIcon: '',
loadingIcon: '',
},
xl: {
base: '',
leadingIcon: '',
leadingAvatarSize: '',
trailingIcon: '',
loadingIcon: '',
},
},
block: {
true: {
base: '',
leadingAvatarSize: '',
trailingIcon: '',
},
},
square: {
true: '',
},
leading: {
true: '',
},
trailing: {
true: '',
},
loading: {
true: {
leadingIcon: '',
label: '',
trailingIcon: '',
loadingIcon: '',
},
},
},
compoundVariants: [],
defaultVariants: {
color: 'primary',
variant: 'solid',
size: 'md',
} as const,
}View Nuxt UI theme
ts
import { buttonGroupVariant } from '@/ui/theme/button-group'
export default {
slots: {
base: 'relative rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors',
label: 'truncate',
leadingIcon: 'shrink-0',
leadingAvatar: 'shrink-0',
leadingAvatarSize: '',
trailingIcon: 'shrink-0',
loadingIcon: 'absolute inset-0 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2',
},
variants: {
...buttonGroupVariant,
color: {
primary: '',
secondary: '',
success: '',
info: '',
warning: '',
error: '',
neutral: '',
},
variant: {
solid: '',
outline: '',
soft: '',
subtle: '',
ghost: '',
link: '',
},
size: {
xs: {
base: 'px-2 py-1 text-xs gap-1',
leadingIcon: 'size-4',
leadingAvatarSize: '3xs',
trailingIcon: 'size-4',
loadingIcon: 'size-4',
},
sm: {
base: 'px-2.5 py-1.5 text-xs gap-1.5',
leadingIcon: 'size-4',
leadingAvatarSize: '3xs',
trailingIcon: 'size-4',
ladingIcon: 'size-4',
},
md: {
base: 'px-2.5 py-1.5 text-sm gap-1.5',
leadingIcon: 'size-5',
leadingAvatarSize: '2xs',
trailingIcon: 'size-5',
loadingIcon: 'size-5',
},
lg: {
base: 'px-3 py-2 text-sm gap-2',
leadingIcon: 'size-5',
leadingAvatarSize: '2xs',
trailingIcon: 'size-5',
loadingIcon: 'size-5',
},
xl: {
base: 'px-3 py-2 text-base gap-2',
leadingIcon: 'size-6',
leadingAvatarSize: 'xs',
trailingIcon: 'size-6',
loadingIcon: 'size-6',
},
},
block: {
true: {
base: 'w-full justify-center',
leadingAvatarSize: 'xs',
trailingIcon: 'ms-auto',
},
},
square: {
true: '',
},
leading: {
true: '',
},
trailing: {
true: '',
},
loading: {
true: {
leadingIcon: 'opacity-0',
label: 'opacity-0',
trailingIcon: 'opacity-0',
loadingIcon: 'animate-spin',
},
},
},
compoundVariants: [
{
color: 'primary',
variant: 'solid',
class: 'text-inverted bg-primary hover:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary',
} as const,
{
color: 'primary',
variant: 'outline',
class: 'ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent focus-visible:ring-2 focus-visible:ring-primary',
} as const,
{
color: 'primary',
variant: 'soft',
class: 'text-primary bg-primary/10 hover:bg-primary/15 focus-visible:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10',
} as const,
{
color: 'primary',
variant: 'subtle',
class: 'text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus-visible:ring-2 focus-visible:ring-primary',
} as const,
{
color: 'primary',
variant: 'ghost',
class: 'text-primary hover:bg-primary/10 focus-visible:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent',
} as const,
{
color: 'primary',
variant: 'link',
class: 'text-primary hover:text-primary/75 disabled:text-primary aria-disabled:text-primary focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary',
} as const,
{
color: 'secondary',
variant: 'solid',
class: 'text-inverted bg-secondary hover:bg-secondary/75 disabled:bg-secondary aria-disabled:bg-secondary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-secondary',
} as const,
{
color: 'secondary',
variant: 'outline',
class: 'ring ring-inset ring-secondary/50 text-secondary hover:bg-secondary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent focus-visible:ring-2 focus-visible:ring-secondary',
} as const,
{
color: 'secondary',
variant: 'soft',
class: 'text-secondary bg-secondary/10 hover:bg-secondary/15 focus-visible:bg-secondary/15 disabled:bg-secondary/10 aria-disabled:bg-secondary/10',
} as const,
{
color: 'secondary',
variant: 'subtle',
class: 'text-secondary ring ring-inset ring-secondary/25 bg-secondary/10 hover:bg-secondary/15 disabled:bg-secondary/10 aria-disabled:bg-secondary/10 focus-visible:ring-2 focus-visible:ring-secondary',
} as const,
{
color: 'secondary',
variant: 'ghost',
class: 'text-secondary hover:bg-secondary/10 focus-visible:bg-secondary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent',
} as const,
{
color: 'secondary',
variant: 'link',
class: 'text-secondary hover:text-secondary/75 disabled:text-secondary aria-disabled:text-secondary focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-secondary',
} as const,
{
color: 'success',
variant: 'solid',
class: 'text-inverted bg-success hover:bg-success/75 disabled:bg-success aria-disabled:bg-success focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-success',
} as const,
{
color: 'success',
variant: 'outline',
class: 'ring ring-inset ring-success/50 text-success hover:bg-success/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent focus-visible:ring-2 focus-visible:ring-success',
} as const,
{
color: 'success',
variant: 'soft',
class: 'text-success bg-success/10 hover:bg-success/15 focus-visible:bg-success/15 disabled:bg-success/10 aria-disabled:bg-success/10',
} as const,
{
color: 'success',
variant: 'subtle',
class: 'text-success ring ring-inset ring-success/25 bg-success/10 hover:bg-success/15 disabled:bg-success/10 aria-disabled:bg-success/10 focus-visible:ring-2 focus-visible:ring-success',
} as const,
{
color: 'success',
variant: 'ghost',
class: 'text-success hover:bg-success/10 focus-visible:bg-success/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent',
} as const,
{
color: 'success',
variant: 'link',
class: 'text-success hover:text-success/75 disabled:text-success aria-disabled:text-success focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-success',
} as const,
{
color: 'info',
variant: 'solid',
class: 'text-inverted bg-info hover:bg-info/75 disabled:bg-info aria-disabled:bg-info focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-info',
} as const,
{
color: 'info',
variant: 'outline',
class: 'ring ring-inset ring-info/50 text-info hover:bg-info/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent focus-visible:ring-2 focus-visible:ring-info',
} as const,
{
color: 'info',
variant: 'soft',
class: 'text-info bg-info/10 hover:bg-info/15 focus-visible:bg-info/15 disabled:bg-info/10 aria-disabled:bg-info/10',
} as const,
{
color: 'info',
variant: 'subtle',
class: 'text-info ring ring-inset ring-info/25 bg-info/10 hover:bg-info/15 disabled:bg-info/10 aria-disabled:bg-info/10 focus-visible:ring-2 focus-visible:ring-info',
} as const,
{
color: 'info',
variant: 'ghost',
class: 'text-info hover:bg-info/10 focus-visible:bg-info/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent',
} as const,
{
color: 'info',
variant: 'link',
class: 'text-info hover:text-info/75 disabled:text-info aria-disabled:text-info focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-info',
} as const,
{
color: 'warning',
variant: 'solid',
class: 'text-inverted bg-warning hover:bg-warning/75 disabled:bg-warning aria-disabled:bg-warning focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-warning',
} as const,
{
color: 'warning',
variant: 'outline',
class: 'ring ring-inset ring-warning/50 text-warning hover:bg-warning/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent focus-visible:ring-2 focus-visible:ring-warning',
} as const,
{
color: 'warning',
variant: 'soft',
class: 'text-warning bg-warning/10 hover:bg-warning/15 focus-visible:bg-warning/15 disabled:bg-warning/10 aria-disabled:bg-warning/10',
} as const,
{
color: 'warning',
variant: 'subtle',
class: 'text-warning ring ring-inset ring-warning/25 bg-warning/10 hover:bg-warning/15 disabled:bg-warning/10 aria-disabled:bg-warning/10 focus-visible:ring-2 focus-visible:ring-warning',
} as const,
{
color: 'warning',
variant: 'ghost',
class: 'text-warning hover:bg-warning/10 focus-visible:bg-warning/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent',
} as const,
{
color: 'warning',
variant: 'link',
class: 'text-warning hover:text-warning/75 disabled:text-warning aria-disabled:text-warning focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-warning',
} as const,
{
color: 'error',
variant: 'solid',
class: 'text-inverted bg-error hover:bg-error/75 disabled:bg-error aria-disabled:bg-error focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-error',
} as const,
{
color: 'error',
variant: 'outline',
class: 'ring ring-inset ring-error/50 text-error hover:bg-error/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent focus-visible:ring-2 focus-visible:ring-error',
} as const,
{
color: 'error',
variant: 'soft',
class: 'text-error bg-error/10 hover:bg-error/15 focus-visible:bg-error/15 disabled:bg-error/10 aria-disabled:bg-error/10',
} as const,
{
color: 'error',
variant: 'subtle',
class: 'text-error ring ring-inset ring-error/25 bg-error/10 hover:bg-error/15 disabled:bg-error/10 aria-disabled:bg-error/10 focus-visible:ring-2 focus-visible:ring-error',
} as const,
{
color: 'error',
variant: 'ghost',
class: 'text-error hover:bg-error/10 focus-visible:bg-error/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent',
} as const,
{
color: 'error',
variant: 'link',
class: 'text-error hover:text-error/75 disabled:text-error aria-disabled:text-error focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-error',
} as const,
{
color: 'neutral',
variant: 'solid',
class: 'text-inverted bg-inverted hover:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted',
} as const,
{
color: 'neutral',
variant: 'outline',
class: 'ring ring-inset ring-accented text-default bg-default hover:bg-elevated disabled:bg-default aria-disabled:bg-default focus-visible:ring-2 focus-visible:ring-inverted',
} as const,
{
color: 'neutral',
variant: 'soft',
class: 'text-default bg-elevated hover:bg-accented/75 focus-visible:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated',
} as const,
{
color: 'neutral',
variant: 'subtle',
class: 'ring ring-inset ring-accented text-default bg-elevated hover:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated focus-visible:ring-2 focus-visible:ring-inverted',
} as const,
{
color: 'neutral',
variant: 'ghost',
class: 'text-default hover:bg-elevated focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent',
} as const,
{
color: 'neutral',
variant: 'link',
class: 'text-muted hover:text-default disabled:text-muted aria-disabled:text-muted focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted',
} as const,
{
size: 'xs',
square: true,
class: 'p-1',
} as const,
{
size: 'sm',
square: true,
class: 'p-1.5',
} as const,
{
size: 'md',
square: true,
class: 'p-1.5',
} as const,
{
size: 'lg',
square: true,
class: 'p-2',
} as const,
{
size: 'xl',
square: true,
class: 'p-2',
} as const,
],
defaultVariants: {
color: 'primary',
variant: 'solid',
size: 'md',
} as const,
}Test
To test this component, you can use the following test file:
ts
import type { RenderOptions } from '@testing-library/vue'
import Button from '@/ui/components/Button.vue'
import theme from '@/ui/theme/button'
import { render, screen } from '@testing-library/vue'
import { describe, expect, it } from 'vitest'
describe('button', () => {
const sizes = Object.keys(theme.variants.size) as any
const variants = Object.keys(theme.variants.variant) as any
it.each<[string, RenderOptions<typeof Button>]>([
// Props
['with label', { props: { label: 'Button' } }],
...sizes.map((size: string) => [`with size ${size}`, { props: { label: 'Button', size } }]),
...variants.map((variant: string) => [`with primary variant ${variant}`, { props: { label: 'Button', variant } }]),
...variants.map((variant: string) => [`with neutral variant ${variant}`, { props: { label: 'Button', variant, color: 'neutral' } }]),
['with icon', { props: { icon: 'i-lucide-rocket' } }],
['with leading and icon', { props: { leading: true, icon: 'i-lucide-arrow-left' } }],
['with leadingIcon', { props: { leadingIcon: 'i-lucide-arrow-left' } }],
['with trailing and icon', { props: { trailing: true, icon: 'i-lucide-arrow-right' } }],
['with trailingIcon', { props: { trailingIcon: 'i-lucide-arrow-right' } }],
['with avatar', { props: { avatar: { src: 'https://github.com/vuejs.png' } } }],
['with avatar and leadingIcon', { props: { avatar: { src: 'https://github.com/vuejs.png' }, leadingIcon: 'i-lucide-arrow-left' } }],
['with avatar and trailingIcon', { props: { avatar: { src: 'https://github.com/vuejs.png' }, trailingIcon: 'i-lucide-arrow-right' } }],
['with loading', { props: { loading: true } }],
['with loading and avatar', { props: { loading: true, avatar: { src: 'https://github.com/vuejs.png' } } }],
['with loading trailing', { props: { loading: true, trailing: true } }],
['with loading trailing and avatar', { props: { loading: true, trailing: true, avatar: { src: 'https://github.com/vuejs.png' } } }],
['with loadingIcon', { props: { loading: true, loadingIcon: 'i-lucide-sparkles' } }],
['with disabled', { props: { label: 'Button', disabled: true } }],
['with disabled and with link', { props: { label: 'Button', disabled: true, to: '/link' } }],
['with block', { props: { label: 'Button', block: true } }],
['with square', { props: { label: 'Button', square: true } }],
['with as', { props: { label: 'Button', as: 'div' } }],
['with class', { props: { label: 'Button', class: 'rounded-full font-bold' } }],
['with ui', { props: { label: 'Button', ui: { label: 'font-bold' } } }],
// Slots
['with default slot', { slots: { default: () => 'Default slot' } }],
['with leading slot', { slots: { leading: () => 'Leading slot' } }],
['with trailing slot', { slots: { trailing: () => 'Trailing slot' } }],
])('renders %s correctly', (name, options) => {
render(Button, {
attrs: {
'data-testid': 'button',
},
...options,
})
expect(screen.getByTestId('button')).matchSnapshot()
})
})ts
import type { RenderOptions } from '@testing-library/vue'
import Button from '@/UI/Components/Button.vue'
import theme from '@/UI/Theme/button'
import { render, screen } from '@testing-library/vue'
import { describe, expect, it } from 'vitest'
describe('button', () => {
const sizes = Object.keys(theme.variants.size) as any
const variants = Object.keys(theme.variants.variant) as any
it.each<[string, RenderOptions<typeof Button>]>([
// Props
['with label', { props: { label: 'Button' } }],
...sizes.map((size: string) => [`with size ${size}`, { props: { label: 'Button', size } }]),
...variants.map((variant: string) => [`with primary variant ${variant}`, { props: { label: 'Button', variant } }]),
...variants.map((variant: string) => [`with neutral variant ${variant}`, { props: { label: 'Button', variant, color: 'neutral' } }]),
['with icon', { props: { icon: 'i-lucide-rocket' } }],
['with leading and icon', { props: { leading: true, icon: 'i-lucide-arrow-left' } }],
['with leadingIcon', { props: { leadingIcon: 'i-lucide-arrow-left' } }],
['with trailing and icon', { props: { trailing: true, icon: 'i-lucide-arrow-right' } }],
['with trailingIcon', { props: { trailingIcon: 'i-lucide-arrow-right' } }],
['with avatar', { props: { avatar: { src: 'https://github.com/vuejs.png' } } }],
['with avatar and leadingIcon', { props: { avatar: { src: 'https://github.com/vuejs.png' }, leadingIcon: 'i-lucide-arrow-left' } }],
['with avatar and trailingIcon', { props: { avatar: { src: 'https://github.com/vuejs.png' }, trailingIcon: 'i-lucide-arrow-right' } }],
['with loading', { props: { loading: true } }],
['with loading and avatar', { props: { loading: true, avatar: { src: 'https://github.com/vuejs.png' } } }],
['with loading trailing', { props: { loading: true, trailing: true } }],
['with loading trailing and avatar', { props: { loading: true, trailing: true, avatar: { src: 'https://github.com/vuejs.png' } } }],
['with loadingIcon', { props: { loading: true, loadingIcon: 'i-lucide-sparkles' } }],
['with disabled', { props: { label: 'Button', disabled: true } }],
['with disabled and with link', { props: { label: 'Button', disabled: true, to: '/link' } }],
['with block', { props: { label: 'Button', block: true } }],
['with square', { props: { label: 'Button', square: true } }],
['with as', { props: { label: 'Button', as: 'div' } }],
['with class', { props: { label: 'Button', class: 'rounded-full font-bold' } }],
['with ui', { props: { label: 'Button', ui: { label: 'font-bold' } } }],
// Slots
['with default slot', { slots: { default: () => 'Default slot' } }],
['with leading slot', { slots: { leading: () => 'Leading slot' } }],
['with trailing slot', { slots: { trailing: () => 'Trailing slot' } }],
])('renders %s correctly', (name, options) => {
render(Button, {
attrs: {
'data-testid': 'button',
},
...options,
})
expect(screen.getByTestId('button')).matchSnapshot()
})
})Contributors
barbapapazes