Movatterモバイル変換

[0]ホーム
URL:

Nuxt UI v3 is officially released.
Buy Nuxt UI Pro

Button

A button element that can act as a link or trigger an action.

Usage

Label

Use the default slot to set the label of the Button.

<template>  <UButton>Button</UButton></template>

You can achieve the same result by using thelabel prop.

<template>  <UButton label="Button" /></template>

Color

Use thecolor prop to change the color of the Button.

<template>  <UButton color="neutral">Button</UButton></template>

Variant

Use thevariant prop to change the variant of the Button.

<template>  <UButton color="neutral" variant="outline">Button</UButton></template>

Size

Use thesize prop to change the size of the Button.

<template>  <UButton size="xl">Button</UButton></template>

Icon

Use theicon prop to show anIcon inside the Button.

<template>  <UButton icon="i-lucide-rocket" size="md" color="primary" variant="solid">Button</UButton></template>

Use theleading andtrailing props to set the icon position or theleading-icon andtrailing-icon props to set a different icon for each position.

<template>  <UButton trailing-icon="i-lucide-arrow-right" size="md">Button</UButton></template>

Thelabel as prop or slot is optional so you can use the Button as an icon-only button.

<template>  <UButton icon="i-lucide-search" size="md" color="primary" variant="solid" /></template>

Avatar

Use theavatar prop to show anAvatar inside the Button.

<template>  <UButton    :avatar="{      src: 'https://github.com/nuxt.png'    }"    size="md"    color="neutral"    variant="outline"  >    Button  </UButton></template>

Thelabel as prop or slot is optional so you can use the Button as an avatar-only button.

<template>  <UButton    :avatar="{      src: 'https://github.com/nuxt.png'    }"    size="md"    color="neutral"    variant="outline"  /></template>

Link

You can pass any property from theLink component such asto,target, etc.

<template>  <UButton to="https://github.com/nuxt/ui" target="_blank">Button</UButton></template>

When the Button is a link or when using theactive prop, you can use theactive-color andactive-variant props to customize the active state.

<template>  <UButton active color="neutral" variant="outline" active-color="primary" active-variant="solid">    Button  </UButton></template>

You can also use theactive-class andinactive-class props to customize the active state.

<template>  <UButton active active-class="font-bold" inactive-class="font-light">Button</UButton></template>
You can configure these styles globally in yourapp.config.ts file under theui.button.variants.active key.
export default defineAppConfig({  ui: {    button: {      variants: {        active: {          true: {            base: 'font-bold'          }        }      }    }  }})

Loading

Use theloading prop to show a loading icon and disable the Button.

<template>  <UButton loading>Button</UButton></template>

Use theloading-auto prop to show the loading icon automatically while the@click promise is pending.

<script setup lang="ts">async function onClick() {  return new Promise<void>(res => setTimeout(res, 1000))}</script><template>  <UButton loading-auto @click="onClick">    Button  </UButton></template>

This also works with theForm component.

<script setup lang="ts">const state= reactive({ fullName: '' })async function onSubmit() {  return new Promise<void>(res => setTimeout(res, 1000))}async function validate(data: Partial<typeof state>) {  if (!data.fullName?.length)return [{ name: 'fullName', message: 'Required' }]  return []}</script><template>  <UForm :state="state" :validate="validate" @submit="onSubmit">    <UFormField name="fullName" label="Full name">      <UInput v-model="state.fullName" />    </UFormField>    <UButton type="submit" class="mt-2" loading-auto>      Submit    </UButton>  </UForm></template>

Loading Icon

Use theloading-icon prop to customize the loading icon. Defaults toi-lucide-refresh-cw.

<template>  <UButton loading loading-icon="i-lucide-repeat-2">Button</UButton></template>
You can customize this icon globally in yourapp.config.ts underui.icons.loading key.
You can customize this icon globally in yourvite.config.ts underui.icons.loading key.

Disabled

Use thedisabled prop to disable the Button.

<template>  <UButton disabled>Button</UButton></template>

Examples

class prop

Use theclass prop to override the base styles of the Button.

<template>  <UButton class="font-bold rounded-full">Button</UButton></template>

ui prop

Use theui prop to override the slots styles of the Button.

<template>  <UButton    icon="i-lucide-rocket"    color="neutral"    variant="outline"    :ui="{      leadingIcon: 'text-(--ui-primary)'    }"  >    Button  </UButton></template>

API

Props

Prop Default Type
as

'button'

any

The element or component this component should render as when not a link.

label

string

color

'primary'

"error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral"

activeColor

"error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral"

variant

'solid'

"link" | "solid" | "outline" | "soft" | "subtle" | "ghost"

activeVariant

"link" | "solid" | "outline" | "soft" | "subtle" | "ghost"

size

'md'

"md" | "xs" | "sm" | "lg" | "xl"

square

boolean

Render the button with equal padding on all sides.

block

boolean

Render the button full width.

loadingAuto

boolean

Set loading state automatically based on the@click promise state

icon

string

Display an icon based on theleading andtrailing props.

avatar

AvatarProps

Display an avatar on the left side.

leading

boolean

Whentrue, the icon will be displayed on the left side.

leadingIcon

string

Display an icon on the left side.

trailing

boolean

Whentrue, the icon will be displayed on the right side.

trailingIcon

string

Display an icon on the right side.

loading

boolean

Whentrue, the loading icon will be displayed.

loadingIcon

appConfig.ui.icons.loading

string

The icon when theloading prop istrue.

active

undefined

boolean

Force the link to be active independent of the current route.

disabled

boolean

to

string | RouteLocationAsRelativeGeneric | RouteLocationAsPathGeneric

Route Location the link should navigate to when clicked on.

type

'button'

"reset" | "submit" | "button"

The type of the button when not a link.

target

null | "_blank" | "_parent" | "_self" | "_top" | string & {}

Where to display the linked URL, as the name for a browsing context.

ui

PartialString<{ base: string[]; label: string; leadingIcon: string; leadingAvatar: string; leadingAvatarSize: string; trailingIcon: string; }>

TheButton component extends theLink component. Check out the source code on GitHub.

Slots

Slot Type
leading

{}

default

{}

trailing

{}

Theme

app.config.ts
export default defineAppConfig({  ui: {    button: {      slots: {        base: [          'rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden 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'      },      variants: {        buttonGroup: {          horizontal: 'not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none',          vertical: 'not-only:first:rounded-b-none not-only:last:rounded-t-none not-last:not-first:rounded-none'        },        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'          },          sm: {            base: 'px-2.5 py-1.5 text-xs gap-1.5',            leadingIcon: 'size-4',            leadingAvatarSize: '3xs',            trailingIcon: 'size-4'          },          md: {            base: 'px-2.5 py-1.5 text-sm gap-1.5',            leadingIcon: 'size-5',            leadingAvatarSize: '2xs',            trailingIcon: 'size-5'          },          lg: {            base: 'px-3 py-2 text-sm gap-2',            leadingIcon: 'size-5',            leadingAvatarSize: '2xs',            trailingIcon: 'size-5'          },          xl: {            base: 'px-3 py-2 text-base gap-2',            leadingIcon: 'size-6',            leadingAvatarSize: 'xs',            trailingIcon: 'size-6'          }        },        block: {          true: {            base: 'w-full justify-center',            trailingIcon: 'ms-auto'          }        },        square: {          true: ''        },        leading: {          true: ''        },        trailing: {          true: ''        },        loading: {          true: ''        },        active: {          true: {            base: ''          },          false: {            base: ''          }        }      },      compoundVariants: [        {          color: 'primary',          variant: 'solid',          class: 'text-(--ui-bg) bg-(--ui-primary) hover:bg-(--ui-primary)/75 disabled:bg-(--ui-primary) aria-disabled:bg-(--ui-primary) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)'        },        {          color: 'primary',          variant: 'outline',          class: 'ring ring-inset ring-(--ui-primary)/50 text-(--ui-primary) hover:bg-(--ui-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-(--ui-primary)'        },        {          color: 'primary',          variant: 'soft',          class: 'text-(--ui-primary) bg-(--ui-primary)/10 hover:bg-(--ui-primary)/15 focus-visible:bg-(--ui-primary)/15 disabled:bg-(--ui-primary)/10 aria-disabled:bg-(--ui-primary)/10'        },        {          color: 'primary',          variant: 'subtle',          class: 'text-(--ui-primary) ring ring-inset ring-(--ui-primary)/25 bg-(--ui-primary)/10 hover:bg-(--ui-primary)/15 disabled:bg-(--ui-primary)/10 aria-disabled:bg-(--ui-primary)/10 focus-visible:ring-2 focus-visible:ring-(--ui-primary)'        },        {          color: 'primary',          variant: 'ghost',          class: 'text-(--ui-primary) hover:bg-(--ui-primary)/10 focus-visible:bg-(--ui-primary)/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent'        },        {          color: 'primary',          variant: 'link',          class: 'text-(--ui-primary) hover:text-(--ui-primary)/75 disabled:text-(--ui-primary) aria-disabled:text-(--ui-primary) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)'        },        {          color: 'neutral',          variant: 'solid',          class: 'text-(--ui-bg) bg-(--ui-bg-inverted) hover:bg-(--ui-bg-inverted)/90 disabled:bg-(--ui-bg-inverted) aria-disabled:bg-(--ui-bg-inverted) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-border-inverted)'        },        {          color: 'neutral',          variant: 'outline',          class: 'ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) hover:bg-(--ui-bg-elevated) disabled:bg-(--ui-bg) aria-disabled:bg-(--ui-bg) focus-visible:ring-2 focus-visible:ring-(--ui-border-inverted)'        },        {          color: 'neutral',          variant: 'soft',          class: 'text-(--ui-text) bg-(--ui-bg-elevated) hover:bg-(--ui-bg-accented)/75 focus-visible:bg-(--ui-bg-accented)/75 disabled:bg-(--ui-bg-elevated) aria-disabled:bg-(--ui-bg-elevated)'        },        {          color: 'neutral',          variant: 'subtle',          class: 'ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg-elevated) hover:bg-(--ui-bg-accented)/75 disabled:bg-(--ui-bg-elevated) aria-disabled:bg-(--ui-bg-elevated) focus-visible:ring-2 focus-visible:ring-(--ui-border-inverted)'        },        {          color: 'neutral',          variant: 'ghost',          class: 'text-(--ui-text) hover:bg-(--ui-bg-elevated) focus-visible:bg-(--ui-bg-elevated) hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent'        },        {          color: 'neutral',          variant: 'link',          class: 'text-(--ui-text-muted) hover:text-(--ui-text) disabled:text-(--ui-text-muted) aria-disabled:text-(--ui-text-muted) focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-(--ui-border-inverted)'        },        {          size: 'xs',          square: true,          class: 'p-1'        },        {          size: 'sm',          square: true,          class: 'p-1.5'        },        {          size: 'md',          square: true,          class: 'p-1.5'        },        {          size: 'lg',          square: true,          class: 'p-2'        },        {          size: 'xl',          square: true,          class: 'p-2'        },        {          loading: true,          leading: true,          class: {            leadingIcon: 'animate-spin'          }        },        {          loading: true,          leading: false,          trailing: true,          class: {            trailingIcon: 'animate-spin'          }        }      ],      defaultVariants: {        color: 'primary',        variant: 'solid',        size: 'md'      }    }  }})
vite.config.ts
import { defineConfig } from 'vite'import vuefrom '@vitejs/plugin-vue'import uifrom '@nuxt/ui/vite'export default defineConfig({  plugins: [    vue(),    ui({      ui: {        button: {          slots: {            base: [              'rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden 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'          },          variants: {            buttonGroup: {              horizontal: 'not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none',              vertical: 'not-only:first:rounded-b-none not-only:last:rounded-t-none not-last:not-first:rounded-none'            },            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'              },              sm: {                base: 'px-2.5 py-1.5 text-xs gap-1.5',                leadingIcon: 'size-4',                leadingAvatarSize: '3xs',                trailingIcon: 'size-4'              },              md: {                base: 'px-2.5 py-1.5 text-sm gap-1.5',                leadingIcon: 'size-5',                leadingAvatarSize: '2xs',                trailingIcon: 'size-5'              },              lg: {                base: 'px-3 py-2 text-sm gap-2',                leadingIcon: 'size-5',                leadingAvatarSize: '2xs',                trailingIcon: 'size-5'              },              xl: {                base: 'px-3 py-2 text-base gap-2',                leadingIcon: 'size-6',                leadingAvatarSize: 'xs',                trailingIcon: 'size-6'              }            },            block: {              true: {                base: 'w-full justify-center',                trailingIcon: 'ms-auto'              }            },            square: {              true: ''            },            leading: {              true: ''            },            trailing: {              true: ''            },            loading: {              true: ''            },            active: {              true: {                base: ''              },              false: {                base: ''              }            }          },          compoundVariants: [            {              color: 'primary',              variant: 'solid',              class: 'text-(--ui-bg) bg-(--ui-primary) hover:bg-(--ui-primary)/75 disabled:bg-(--ui-primary) aria-disabled:bg-(--ui-primary) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)'            },            {              color: 'primary',              variant: 'outline',              class: 'ring ring-inset ring-(--ui-primary)/50 text-(--ui-primary) hover:bg-(--ui-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-(--ui-primary)'            },            {              color: 'primary',              variant: 'soft',              class: 'text-(--ui-primary) bg-(--ui-primary)/10 hover:bg-(--ui-primary)/15 focus-visible:bg-(--ui-primary)/15 disabled:bg-(--ui-primary)/10 aria-disabled:bg-(--ui-primary)/10'            },            {              color: 'primary',              variant: 'subtle',              class: 'text-(--ui-primary) ring ring-inset ring-(--ui-primary)/25 bg-(--ui-primary)/10 hover:bg-(--ui-primary)/15 disabled:bg-(--ui-primary)/10 aria-disabled:bg-(--ui-primary)/10 focus-visible:ring-2 focus-visible:ring-(--ui-primary)'            },            {              color: 'primary',              variant: 'ghost',              class: 'text-(--ui-primary) hover:bg-(--ui-primary)/10 focus-visible:bg-(--ui-primary)/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent'            },            {              color: 'primary',              variant: 'link',              class: 'text-(--ui-primary) hover:text-(--ui-primary)/75 disabled:text-(--ui-primary) aria-disabled:text-(--ui-primary) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)'            },            {              color: 'neutral',              variant: 'solid',              class: 'text-(--ui-bg) bg-(--ui-bg-inverted) hover:bg-(--ui-bg-inverted)/90 disabled:bg-(--ui-bg-inverted) aria-disabled:bg-(--ui-bg-inverted) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-border-inverted)'            },            {              color: 'neutral',              variant: 'outline',              class: 'ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) hover:bg-(--ui-bg-elevated) disabled:bg-(--ui-bg) aria-disabled:bg-(--ui-bg) focus-visible:ring-2 focus-visible:ring-(--ui-border-inverted)'            },            {              color: 'neutral',              variant: 'soft',              class: 'text-(--ui-text) bg-(--ui-bg-elevated) hover:bg-(--ui-bg-accented)/75 focus-visible:bg-(--ui-bg-accented)/75 disabled:bg-(--ui-bg-elevated) aria-disabled:bg-(--ui-bg-elevated)'            },            {              color: 'neutral',              variant: 'subtle',              class: 'ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg-elevated) hover:bg-(--ui-bg-accented)/75 disabled:bg-(--ui-bg-elevated) aria-disabled:bg-(--ui-bg-elevated) focus-visible:ring-2 focus-visible:ring-(--ui-border-inverted)'            },            {              color: 'neutral',              variant: 'ghost',              class: 'text-(--ui-text) hover:bg-(--ui-bg-elevated) focus-visible:bg-(--ui-bg-elevated) hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent'            },            {              color: 'neutral',              variant: 'link',              class: 'text-(--ui-text-muted) hover:text-(--ui-text) disabled:text-(--ui-text-muted) aria-disabled:text-(--ui-text-muted) focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-(--ui-border-inverted)'            },            {              size: 'xs',              square: true,              class: 'p-1'            },            {              size: 'sm',              square: true,              class: 'p-1.5'            },            {              size: 'md',              square: true,              class: 'p-1.5'            },            {              size: 'lg',              square: true,              class: 'p-2'            },            {              size: 'xl',              square: true,              class: 'p-2'            },            {              loading: true,              leading: true,              class: {                leadingIcon: 'animate-spin'              }            },            {              loading: true,              leading: false,              trailing: true,              class: {                trailingIcon: 'animate-spin'              }            }          ],          defaultVariants: {            color: 'primary',            variant: 'solid',            size: 'md'          }        }      }    })  ]})
vite.config.ts
import { defineConfig } from 'vite'import vuefrom '@vitejs/plugin-vue'import uiProfrom '@nuxt/ui-pro/vite'export default defineConfig({  plugins: [    vue(),    uiPro({      ui: {        button: {          slots: {            base: [              'rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden 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'          },          variants: {            buttonGroup: {              horizontal: 'not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none',              vertical: 'not-only:first:rounded-b-none not-only:last:rounded-t-none not-last:not-first:rounded-none'            },            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'              },              sm: {                base: 'px-2.5 py-1.5 text-xs gap-1.5',                leadingIcon: 'size-4',                leadingAvatarSize: '3xs',                trailingIcon: 'size-4'              },              md: {                base: 'px-2.5 py-1.5 text-sm gap-1.5',                leadingIcon: 'size-5',                leadingAvatarSize: '2xs',                trailingIcon: 'size-5'              },              lg: {                base: 'px-3 py-2 text-sm gap-2',                leadingIcon: 'size-5',                leadingAvatarSize: '2xs',                trailingIcon: 'size-5'              },              xl: {                base: 'px-3 py-2 text-base gap-2',                leadingIcon: 'size-6',                leadingAvatarSize: 'xs',                trailingIcon: 'size-6'              }            },            block: {              true: {                base: 'w-full justify-center',                trailingIcon: 'ms-auto'              }            },            square: {              true: ''            },            leading: {              true: ''            },            trailing: {              true: ''            },            loading: {              true: ''            },            active: {              true: {                base: ''              },              false: {                base: ''              }            }          },          compoundVariants: [            {              color: 'primary',              variant: 'solid',              class: 'text-(--ui-bg) bg-(--ui-primary) hover:bg-(--ui-primary)/75 disabled:bg-(--ui-primary) aria-disabled:bg-(--ui-primary) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)'            },            {              color: 'primary',              variant: 'outline',              class: 'ring ring-inset ring-(--ui-primary)/50 text-(--ui-primary) hover:bg-(--ui-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-(--ui-primary)'            },            {              color: 'primary',              variant: 'soft',              class: 'text-(--ui-primary) bg-(--ui-primary)/10 hover:bg-(--ui-primary)/15 focus-visible:bg-(--ui-primary)/15 disabled:bg-(--ui-primary)/10 aria-disabled:bg-(--ui-primary)/10'            },            {              color: 'primary',              variant: 'subtle',              class: 'text-(--ui-primary) ring ring-inset ring-(--ui-primary)/25 bg-(--ui-primary)/10 hover:bg-(--ui-primary)/15 disabled:bg-(--ui-primary)/10 aria-disabled:bg-(--ui-primary)/10 focus-visible:ring-2 focus-visible:ring-(--ui-primary)'            },            {              color: 'primary',              variant: 'ghost',              class: 'text-(--ui-primary) hover:bg-(--ui-primary)/10 focus-visible:bg-(--ui-primary)/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent'            },            {              color: 'primary',              variant: 'link',              class: 'text-(--ui-primary) hover:text-(--ui-primary)/75 disabled:text-(--ui-primary) aria-disabled:text-(--ui-primary) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)'            },            {              color: 'neutral',              variant: 'solid',              class: 'text-(--ui-bg) bg-(--ui-bg-inverted) hover:bg-(--ui-bg-inverted)/90 disabled:bg-(--ui-bg-inverted) aria-disabled:bg-(--ui-bg-inverted) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-border-inverted)'            },            {              color: 'neutral',              variant: 'outline',              class: 'ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) hover:bg-(--ui-bg-elevated) disabled:bg-(--ui-bg) aria-disabled:bg-(--ui-bg) focus-visible:ring-2 focus-visible:ring-(--ui-border-inverted)'            },            {              color: 'neutral',              variant: 'soft',              class: 'text-(--ui-text) bg-(--ui-bg-elevated) hover:bg-(--ui-bg-accented)/75 focus-visible:bg-(--ui-bg-accented)/75 disabled:bg-(--ui-bg-elevated) aria-disabled:bg-(--ui-bg-elevated)'            },            {              color: 'neutral',              variant: 'subtle',              class: 'ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg-elevated) hover:bg-(--ui-bg-accented)/75 disabled:bg-(--ui-bg-elevated) aria-disabled:bg-(--ui-bg-elevated) focus-visible:ring-2 focus-visible:ring-(--ui-border-inverted)'            },            {              color: 'neutral',              variant: 'ghost',              class: 'text-(--ui-text) hover:bg-(--ui-bg-elevated) focus-visible:bg-(--ui-bg-elevated) hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent'            },            {              color: 'neutral',              variant: 'link',              class: 'text-(--ui-text-muted) hover:text-(--ui-text) disabled:text-(--ui-text-muted) aria-disabled:text-(--ui-text-muted) focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-(--ui-border-inverted)'            },            {              size: 'xs',              square: true,              class: 'p-1'            },            {              size: 'sm',              square: true,              class: 'p-1.5'            },            {              size: 'md',              square: true,              class: 'p-1.5'            },            {              size: 'lg',              square: true,              class: 'p-2'            },            {              size: 'xl',              square: true,              class: 'p-2'            },            {              loading: true,              leading: true,              class: {                leadingIcon: 'animate-spin'              }            },            {              loading: true,              leading: false,              trailing: true,              class: {                trailingIcon: 'animate-spin'              }            }          ],          defaultVariants: {            color: 'primary',            variant: 'solid',            size: 'md'          }        }      }    })  ]})
Some colors incompoundVariants are omitted for readability. Check out the source code on GitHub.
[8]ページ先頭
©2009-2025 Movatter.jp