The ColorModeButton component extends the Button component, so you can pass any property such as color, size, etc.
{
"wait": "Loading client-side content..."
}color="air-tertiary-no-accent".As the button is wrapped in a ClientOnly component, you can pass a fallback slot to display a placeholder while the component is loading.
{
"wait": "Loading client-side content..."
}| Prop | Default | Type |
|---|---|---|
as | 'button' | anyThe 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 | |
referrerpolicy | "" | "no-referrer" | "no-referrer-when-downgrade" | "origin" | "origin-when-cross-origin" | "same-origin" | "strict-origin" | "strict-origin-when-cross-origin" | "unsafe-url" | |
icon | IconComponentDisplay an icon on the left side. | |
size | 'md' | "md" | "xs" | "sm" | "lg" | "xl" | "xss" |
avatar | AvatarPropsDisplay an avatar on the left side.
| |
to | string | RouteLocationAsRelativeGeneric | RouteLocationAsPathGenericRoute Location the link should navigate to when clicked on.
| |
autofocus | false | true | "true" | "false" | |
disabled | boolean | |
name | string | |
type | 'button' | "reset" | "submit" | "button"The type of the button when not a link. |
download | any | |
hreflang | string | |
media | string | |
ping | string | |
target | null | string & {} | "_blank" | "_parent" | "_self" | "_top"Where to display the linked URL, as the name for a browsing context. | |
active | boolean Force the link to be active independent of the current route. | |
isAction | boolean When | |
trailingSlash | "append" | "remove"An option to either add or remove trailing slashes in the | |
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 |
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; } |
| Slot | Type |
|---|