Button
Create a button component with different variants and colors
Usage
Default button style
<template>
<RayButton />
</template>
Styles
Use the variant and color props to predefined styles and change the color of buttons.
<template>
<RayButton variant="soft" color="violet" />
</template>
Match
The color of the buttons will match the color theme.
<template>
<RayButton color="match" />
</template>
Invert
The color of the buttons will be the opposite of the color theme.
<template>
<RayButton color="invert" />
</template>
Sizes
<template>
<RayButton size="sm" />
</template>
Block
<template>
<RayButton block />
</template>
Label
<template>
<RayButton label="Button" />
</template>
Disabled
<template>
<RayButton disabled variant="solid" />
</template>
Icon
<template>
<RayButton icon="tabler:adjustments" size="sm" :loading="false" />
</template>
Loading
<template>
<RayButton loading variant="solid" />
</template>
API
Props
| Prop | Default | Type |
|---|---|---|
| target | "_blank" | "_parent" | "_self" | "_top" | (string & {}) | null | undefined | |
| to | "" | string | undefined |
| activeClass | string | undefined | |
| exactActiveClass | string | undefined | |
| ariaCurrentValue | "page" | "step" | "location" | "date" | "time" | "true" | "false" | undefined | |
| replace | boolean | undefined | |
| noRel | boolean | undefined | |
| prefetch | boolean | undefined | |
| noPrefetch | boolean | undefined | |
| prefetchedClass | string | undefined | |
| external | boolean | undefined | |
| size | config.default.size | ButtonSize | undefined |
| color | config.default.color | string | undefined |
| variant | config.default.variant | ButtonVariant | undefined |
| block | false | boolean | undefined |
| square | false | boolean | undefined |
| icon | null | string | undefined |
| disabled | false | boolean | undefined |
| loading | false | boolean | undefined |
| padded | true | boolean | undefined |
| label | "" | string | undefined |
| loadingIcon | config.default.loadingIcon | string | undefined |
| ui | {} | ({ base?: string | undefined; rounded?: string | undefined; font?: string | undefined; block?: string | undefined; inline?: string | undefined; size?: DeepPartial<{ '2xs': "text-xs"; xs: "text-xs"; sm: "text-sm"; md: "text-sm"; lg: "text-sm"; xl: "text-base"; }, any> | undefined; ... 6 more ...; default?: DeepPartia... |
| href | string | RouteLocationAsRelativeGeneric | RouteLocationAsPathGeneric | undefined | |
| rel | any |
Theme
{
base: 'focus:outline-none focus-visible:outline-0 disabled:cursor-not-allowed disabled:opacity-70 aria-disabled:cursor-not-allowed aria-disabled:opacity-70 flex-shrink-0 transition text-left break-all line-clamp-1',
rounded: 'rounded-lg',
font: 'font-medium',
block: 'w-full flex justify-center items-center',
inline: 'inline-flex items-center',
size: {
'2xs': 'text-xs',
xs: 'text-xs',
sm: 'text-sm',
md: 'text-sm',
lg: 'text-sm',
xl: 'text-base'
},
padding: {
'2xs': 'px-2 py-1',
xs: 'px-2.5 py-1.5',
sm: 'px-2.5 py-1.5',
md: 'px-3 py-2',
lg: 'px-3.5 py-2.5',
xl: 'px-3.5 py-2.5'
},
square: {
'2xs': 'p-1',
xs: 'p-1.5',
sm: 'p-1.5',
md: 'p-2',
lg: 'p-2.5',
xl: 'p-2.5'
},
gap: {
'2xs': 'gap-x-1',
xs: 'gap-x-1.5',
sm: 'gap-x-1.5',
md: 'gap-x-2',
lg: 'gap-x-2.5',
xl: 'gap-x-2.5'
},
icon: {
base: 'flex-shrink-0',
size: {
'2xs': 'h-4 w-4',
xs: 'h-4 w-4',
sm: 'h-4 w-4',
md: 'h-5 w-5',
lg: 'h-5 w-5',
xl: 'h-6 w-6'
}
},
color: {
match: {
solid: 'shadow-sm active:shadow-none bg-white dark:bg-gray-900 hover:bg-gray-100 dark:hover:bg-gray-800 text-gray-900 dark:text-white ring-1 ring-inset ring-gray-300 dark:ring-gray-700 disabled:bg-white disabled:active:shadow-sm focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400'
},
invert: {
solid: 'shadow-sm active:shadow-none bg-gray-900 dark:bg-white hover:bg-gray-800 dark:hover:bg-gray-100 text-white dark:text-gray-900 ring-1 ring-inset ring-gray-900 dark:ring-white disabled:bg-white disabled:active:shadow-sm focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400'
}
},
variant: {
solid: 'shadow-sm hover:shadow-md disabled:hover:shadow-sm active:shadow-none bg-{color}-500 disabled:bg-{color}-500 aria-disabled:bg-{color}-500 hover:bg-{color}-600 text-white active:bg-{color}-700 dark:active:bg-{color}-500 focus:ring focus:ring-{color}-300 focus:ring-opacity-50 dark:focus:ring-opacity-20',
outline: 'ring-1 ring-inset ring-current ring-{color}-500 text-{color}-500 dark:hover:text-{color}-400 dark:hover:text-{color}-500 hover:bg-{color}-100 dark:hover:bg-{color}-900 disabled:bg-transparent disabled:hover:bg-transparent aria-disabled:bg-transparent focus-visible:ring-2 focus-visible:ring-{color}-500 dark:focus-visible:ring-{color}-400',
soft: 'text-{color}-500 dark:text-{color}-400 bg-{color}-50 hover:bg-{color}-100 disabled:bg-{color}-50 aria-disabled:bg-{color}-50 dark:bg-{color}-950 dark:hover:bg-{color}-900 dark:disabled:bg-{color}-950 dark:aria-disabled:bg-{color}-950 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-{color}-500 dark:focus-visible:ring-{color}-400 transition-none',
ghost: 'text-{color}-500 dark:text-{color}-400 hover:bg-{color}-50 disabled:bg-transparent aria-disabled:bg-transparent dark:hover:bg-{color}-950 dark:disabled:bg-transparent dark:aria-disabled:bg-transparent focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-{color}-500 dark:focus-visible:ring-{color}-400',
link: 'text-{color}-500 hover:text-{color}-600 disabled:text-{color}-500 aria-disabled:text-{color}-500 dark:text-{color}-400 dark:hover:text-{color}-500 dark:disabled:text-{color}-400 dark:aria-disabled:text-{color}-400 underline-offset-4 hover:underline focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-{color}-500 dark:focus-visible:ring-{color}-400'
},
default: {
size: 'sm',
color: 'primary',
variant: 'solid',
loadingIcon: 'svg-spinners:90-ring-with-bg'
}
}