Vue ColorModeButton Component

Usage

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".

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.
`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"`
`depth`	`'normal'`	`"light" \| "dark" \| "normal"` Deprecated — removed in 3.0.0 Renders nothing on the `air-*` colours, the default among them: the `depth` compound variants are keyed on the legacy colour names only.
`activeDepth`		`"light" \| "dark" \| "normal"` Deprecated — removed in 3.0.0 Same as `depth` — no effect on the `air-*` colours.
`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 a dropdown chevron on the right side, from the dictionary's `chevronDown` role, so an `app.config` override reaches it.
`b24ui`		`{ base?: SlotClass; baseLoading?: SlotClass; baseLoadingWaitIcon?: SlotClass; baseLoadingClockIcon?: SlotClass; baseLoadingSpinnerIcon?: SlotClass; baseLine?: SlotClass; label?: SlotClass; labelInner?: SlotClass; leadingIcon?: SlotClass; leadingAvatar?: SlotClass; leadingAvatarSize?: SlotClass; trailingIcon?: SlotClass; safeList?: SlotClass; }`

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.