ColorModeButton

A button to toggle between light and dark themes.

The ColorModeButton component extends the Button component, so you can pass any property such as color, size, etc.

<template>
  <B24ColorModeButton />
</template>

The button defaults to color="air-tertiary-no-accent".

Examples

With fallback slot

As the button is wrapped in a ClientOnly component, you can pass a fallback slot to display a placeholder while the component is loading.

<template>
  <B24ColorModeButton>
    <template #fallback>
      <B24Button loading />
    </template>
  </B24ColorModeButton>
</template>

API

Props

Prop	Default	Type
`as`	`'button'`	`any` The element or component this component should render as when not a link.
`color`	`'air-tertiary-no-accent'`	`"air-primary" \| "air-primary-success" \| "air-primary-alert" \| "air-primary-copilot" \| "air-secondary" \| "air-secondary-alert" \| "air-secondary-accent" \| "air-secondary-accent-1" \| "air-secondary-accent-2" \| "air-secondary-no-accent" \| "air-tertiary" \| "air-tertiary-accent" \| "air-tertiary-no-accent" \| "air-selection" \| "air-boost"`
`loading`		`boolean` When `true`, the loading icon will be displayed.
`icon`		`IconComponent` Display an icon on the left side.
`size`	`'md'`	`"md" \| "xs" \| "sm" \| "lg" \| "xl" \| "xss"`
`avatar`		`AvatarProps` Display an avatar on the left side.
`autofocus`		`false \| true \| "true" \| "false"`
`disabled`		`boolean`
`name`		`string`
`type`	`'button'`	`"reset" \| "submit" \| "button"` The type of the button when not a link.
`isAction`		`boolean` When `true`, uses special underlined styling.
`label`		`string`
`activeColor`		`"air-primary" \| "air-primary-success" \| "air-primary-alert" \| "air-primary-copilot" \| "air-secondary" \| "air-secondary-alert" \| "air-secondary-accent" \| "air-secondary-accent-1" \| "air-secondary-accent-2" \| "air-secondary-no-accent" \| "air-tertiary" \| "air-tertiary-accent" \| "air-tertiary-no-accent" \| "air-selection" \| "air-boost"`
`rounded`	`false`	`boolean` Rounds the corners of the button
`block`	`false`	`boolean` Render the button full width
`loadingAuto`	`false`	`boolean` Set loading state automatically based on the `@click` promise state
`normalCase`	`true`	`boolean` Disable uppercase label
`useWait`	`false`	`boolean` Shows LoaderWaitIcon in loading mode
`useClock`	`false`	`boolean` Shows LoaderClockIcon icon in loading mode
`useDropdown`	`false`	`boolean` Shows icons.ChevronDownSIcon on the right side
`b24ui`		`{ base?: ClassNameValue; baseLoading?: ClassNameValue; baseLoadingWaitIcon?: ClassNameValue; baseLoadingClockIcon?: ClassNameValue; baseLoadingSpinnerIcon?: ClassNameValue; baseLine?: ClassNameValue; label?: ClassNameValue; labelInner?: ClassNameValue; leadingIcon?: ClassNameValue; leadingAvatar?: ClassNameValue; leadingAvatarSize?: ClassNameValue; trailingIcon?: ClassNameValue; safeList?: ClassNameValue; }`

This component also supports all native <button> HTML attributes.

Slots

Slot	Type

ColorModeAvatar

An Avatar that automatically switches its image based on the current theme (light/dark).

ColorModeImage

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

ColorModeButton

Usage

Examples

With fallback slot

API

Props

Slots