Couleur ModeButton

Un bouton pour basculer entre le mode clair et sombre.

Utilisation

Le composant ColorModeButton étend le composant Button, de sorte que vous pouvez passer n'importe quelle propriété telle que color, variant, size, etc.

<template>
  <UColorModeButton />
</template>

Le bouton par défaut est color="neutral" et variant="ghost".

Exemples

Avec icônes personnalisées

Utilisez le app.config.ts pour personnaliser l'icône avec la propriété ui.icons:

app/app.config.ts

export default defineAppConfig({
  ui: {
    icons: {
      light: 'i-lucide-sun-medium',
      dark: 'i-lucide-moon-star'
    }
  }
})

Utilisez le vite.config.ts pour personnaliser l'icône avec la propriété ui.icons:

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      ui: {
        icons: {
          light: 'i-lucide-sun-medium',
          dark: 'i-lucide-moon-star'
        }
      }
    })
  ]
})

API

Props

Prop	Default	Type
`as`	`'button'`	`any` The element or component this component should render as when not a link.
`color`	`'neutral'`	`"primary" \| "secondary" \| "success" \| "info" \| "warning" \| "error" \| "neutral"`
`variant`	`'ghost'`	`"link" \| "ghost" \| "solid" \| "outline" \| "soft" \| "subtle"`
`trailingIcon`		`any` Display an icon on the right side.
`name`		`string`
`trailing`		`boolean` When `true`, the icon will be displayed on the right side.
`loading`		`boolean` When `true`, the loading icon will be displayed.
`icon`		`any` Display an icon based on the `leading` and `trailing` props.
`size`	`'md'`	`"md" \| "xs" \| "sm" \| "lg" \| "xl"`
`avatar`		`AvatarProps` Display an avatar on the left side.
`autofocus`		`false \| true \| "true" \| "false"`
`disabled`		`boolean`
`type`	`'button'`	`"reset" \| "submit" \| "button"` The type of the button when not a link.
`label`		`string`
`activeColor`		`"primary" \| "secondary" \| "success" \| "info" \| "warning" \| "error" \| "neutral"`
`activeVariant`		`"link" \| "ghost" \| "solid" \| "outline" \| "soft" \| "subtle"`
`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
`leading`		`boolean` When `true`, the icon will be displayed on the left side.
`leadingIcon`		`any` Display an icon on the left side.
`loadingIcon`	`appConfig.ui.icons.loading`	`any` The icon when the `loading` prop is `true`.
`ui`		`{ base?: SlotClass; label?: SlotClass; leadingIcon?: SlotClass; leadingAvatar?: SlotClass; leadingAvatarSize?: SlotClass; trailingIcon?: SlotClass; }`

Ce composant prend également en charge tous les attributs HTML natifs <button>.

Changelog

No recent changes

ColorModeAvatar

An Avatar with a different source for light and dark mode.

ColorModeImage

An image element with a different source for light and dark mode.