v2.1.16
/
Use our Nuxt starter

Button

A button capable of linking or performing an action.
GitHub
Demo
Nuxt UI

Usage

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

<template>
  <B24Button>Button</B24Button>
</template>

Label

Use the label prop to set the label of the Button.

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

Color

Use the color prop to change the color of the Button.

<template>
  <B24Button color="air-secondary-no-accent">Button</B24Button>
</template>

Size

Use the size prop to change the size of the Button.

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

Icon

Use the icon prop to show an Icon inside the Button.

<script setup lang="ts">
import RocketIcon from '@bitrix24/b24icons-vue/main/RocketIcon'
</script>

<template>
  <B24Button :icon="RocketIcon" size="md" color="air-primary">Button</B24Button>
</template>

Use the use-dropdown prop to show trailing-icon.

<script setup lang="ts">
import RocketIcon from '@bitrix24/b24icons-vue/main/RocketIcon'
</script>

<template>
  <B24Button use-dropdown :icon="RocketIcon" size="md" color="air-primary">Button</B24Button>
</template>

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

<script setup lang="ts">
import RocketIcon from '@bitrix24/b24icons-vue/main/RocketIcon'
</script>

<template>
  <B24Button :icon="RocketIcon" size="md" color="air-primary" />
</template>

Avatar

Use the avatar prop to show an Avatar inside the Button.

<template>
  <B24Button
    :avatar="{
      src: '/b24ui/avatar/employee.png'
    }"
    size="md"
    color="air-primary"
  >
    Button
  </B24Button>
</template>

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

<template>
  <B24Button
    :avatar="{
      src: '/b24ui/avatar/employee.png'
    }"
    size="md"
    color="air-primary"
  />
</template>

Link

You can pass any property from the Link component such as to, target, etc.

Button
<template>
  <B24Button to="https://apidocs.bitrix24.com" target="_blank">Button</B24Button>
</template>

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

<template>
  <B24Button active color="air-secondary-no-accent" active-color="air-primary"> Button </B24Button>
</template>

You can also use the active-class and inactive-class props to customize the active state.

<template>
  <B24Button active active-class="italic" inactive-class="tracking-widest">Button</B24Button>
</template>

Loading

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

<template>
  <B24Button loading color="air-primary">Button</B24Button>
</template>

Use the loading-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>
  <B24Button loading-auto color="air-primary" @click="onClick">
    Button
  </B24Button>
</template>

This also works with the Form 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>
  <B24Form :state="state" :validate="validate" @submit="onSubmit">
    <B24FormField name="fullName" label="Full name">
      <B24Input v-model="state.fullName" />
    </B24FormField>
    <B24Button type="submit" class="mt-2" color="air-primary-success" loading-auto>
      Submit
    </B24Button>
  </B24Form>
</template>

Loading Icon

Use use-clock or use-wait props to show different loading icons.

<template>
  <B24Button loading use-wait color="air-primary">Button</B24Button>
</template>

Disabled

Use the disabled prop to disable the Button.

<template>
  <B24Button disabled color="air-primary">Button</B24Button>
</template>

Rounded

Use the rounded prop to round the Button.

<template>
  <B24Button rounded color="air-primary">Button</B24Button>
</template>

Block

Use the block property to set w-full for the Button.

<template>
  <B24Button block color="air-primary">Button</B24Button>
</template>

NormalCase

Use the normalCase property to set uppercase for the Button.

<template>
  <B24Button :normal-case="false" color="air-primary">Button</B24Button>
</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'air-secondary-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" | "link"
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" | "link"
size'md' "xs" | "md" | "xss" | "sm" | "lg" | "xl"
roundedfalseboolean

Rounds the corners of the button

blockfalseboolean

Render the button full width

loadingAutofalseboolean

Set loading state automatically based on the @click promise state

normalCasetrueboolean

Disable uppercase label

useWaitfalseboolean

Shows LoaderWaitIcon in loading mode

useClockfalseboolean

Shows LoaderClockIcon icon in loading mode

useDropdownfalseboolean

Shows icons.ChevronDownSIcon on the right side

iconIconComponent

Display an icon on the left side.

avatar AvatarProps

Display an avatar on the left side.

loadingboolean

When true, the loading icon will be displayed.

to string | RouteLocationAsRelativeGeneric | RouteLocationAsPathGeneric

Route Location the link should navigate to when clicked on.

autofocus false | true | "true" | "false"
disabledboolean
name string
type'button' "reset" | "submit" | "button"

The type of the button when not a link.

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

referrerpolicy "" | "no-referrer" | "no-referrer-when-downgrade" | "origin" | "origin-when-cross-origin" | "same-origin" | "strict-origin" | "strict-origin-when-cross-origin" | "unsafe-url"
activeboolean

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

isActionboolean

When true, uses special underlined styling.

trailingSlash "remove" | "append"

An option to either add or remove trailing slashes in the href for this specific link. Overrides the global trailingSlash option if provided.

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.
The Button component extends the Link component. Check out the source code on GitHub.

Slots

Slot Type
leading{ b24ui: object; }
default{ b24ui: object; }
trailing{ b24ui: object; }

Theme

app.config.ts
export default defineAppConfig({
  b24ui: {
    button: {
      slots: {
        base: 'ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center relative outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight)',
        baseLoading: 'h-full w-full absolute inset-0 flex flex-row flex-nowrap items-center justify-center',
        baseLoadingWaitIcon: 'text-(--ui-btn-color) size-[calc(var(--ui-btn-wait-icon-size)_+_7px)]',
        baseLoadingClockIcon: 'text-(--ui-btn-color) size-[calc(var(--ui-btn-wait-icon-size)_+_7px)]',
        baseLoadingSpinnerIcon: 'text-(--ui-btn-color) size-(--ui-btn-wait-icon-size) animate-spin stroke-2',
        baseLine: 'w-full inline-flex items-center justify-center gap-(--ui-btn-icon-space) ps-(--ui-btn-padding-left) pe-(--ui-btn-padding-right) h-(--ui-btn-height)',
        label: 'h-(--ui-btn-height) max-w-full inline-flex flex-row items-center tracking-(--ui-btn-letter-spacing) overflow-visible text-clip',
        labelInner: 'truncate inline-block max-w-full mt-(--ui-btn-title-compensation)',
        leadingIcon: 'text-(--ui-btn-color) shrink-0 size-(--ui-btn-icon-size)',
        leadingAvatar: 'shrink-0 me-[4px]',
        leadingAvatarSize: '',
        trailingIcon: 'text-(--ui-btn-color) shrink-0 size-(--ui-btn-icon-size) mt-(--ui-btn-title-compensation)',
        safeList: 'invisible'
      },
      variants: {
        fieldGroup: {
          horizontal: 'focus-visible:outline-none ring ring-inset ring-0 focus-visible:ring-2 group-[.is-field-group]/items:not-only:first:rounded-e-none group-[.is-field-group]/items:not-only:last:rounded-s-none group-[.is-field-group]/items:not-last:not-first:rounded-none group-[.is-field-group]/items:not-only:first:border-e-0 group-[.is-field-group]/items:not-only:not-first:border-s-0 focus-visible:z-[1]',
          vertical: 'focus-visible:outline-none ring ring-inset ring-0 focus-visible:ring-2 not-only:first:rounded-b-none not-only:last:rounded-t-none not-last:not-first:rounded-none focus-visible:z-[1]'
        },
        noSplit: {
          false: "group-[.is-field-group]/items:not-only:not-first:after:content-[''] group-[.is-field-group]/items:not-only:not-first:after:absolute group-[.is-field-group]/items:not-only:not-first:after:top-[7px] group-[.is-field-group]/items:not-only:not-first:after:bottom-[6px] group-[.is-field-group]/items:not-only:not-first:after:left-0 group-[.is-field-group]/items:not-only:not-first:after:w-px group-[.is-field-group]/items:not-only:not-first:after:bg-current/30"
        },
        color: {
          'air-primary': '--style-filled',
          'air-primary-success': '--style-filled-success',
          'air-primary-alert': '--style-filled-alert',
          'air-primary-copilot': '--style-filled-copilot',
          'air-secondary': '--style-tinted',
          'air-secondary-alert': '--style-tinted-alert',
          'air-secondary-accent': '--style-outline',
          'air-secondary-accent-1': '--style-outline-accent-1',
          'air-secondary-accent-2': '--style-outline-accent-2',
          'air-secondary-no-accent': '--style-outline-no-accent',
          'air-tertiary': '--style-plain',
          'air-tertiary-accent': '--style-plain-accent',
          'air-tertiary-no-accent': '--style-plain-no-accent',
          'air-selection': '--style-selection',
          'air-boost': {
            base: '--style-filled-boost bg-transparent hover:bg-transparent focus:bg-transparent active:bg-transparent disabled:bg-transparent aria-disabled:bg-transparent from-0% via-58.65% to-100% bg-radial-[110.42%_110.42%_at_-10.42%_31.25%] from-(--ui-color-design-filled-boost-bg-gradient-1) via-(--ui-color-design-filled-boost-bg-gradient-2) to-(--ui-color-design-filled-boost-bg-gradient-3) hover:bg-radial-[110.42%_110.42%_at_-10.42%_31.25%] hover:from-(--hover-color-1) via-(--hover-color-2) hover:via-58.65% hover:to-(--hover-color-3) focus:bg-radial-[110.42%_110.42%_at_-10.42%_31.25%] focus:from-(--hover-color-1) via-(--hover-color-2) focus:via-58.65% to-(--hover-color-3) active:bg-radial-[110.42%_110.42%_at_-10.42%_31.25%] active:from-(--active-color-1) via-(--active-color-2) active:via-58.65% to-(--active-color-3) disabled:bg-radial-[110.42%_110.42%_at_-10.42%_31.25%] disabled:from-(--ui-color-design-filled-boost-bg-gradient-1) via-(--ui-color-design-filled-boost-bg-gradient-2) to-(--ui-color-design-filled-boost-bg-gradient-3) aria-disabled:bg-radial-[110.42%_110.42%_at_-10.42%_31.25%] aria-disabled:from-(--ui-color-design-filled-boost-bg-gradient-1) aria-disabled:via-(--ui-color-design-filled-boost-bg-gradient-2) aria-disabled:to-(--ui-color-design-filled-boost-bg-gradient-3)'
          },
          default: '',
          danger: '',
          success: '',
          warning: '',
          primary: '',
          secondary: '',
          collab: '',
          ai: '',
          link: ''
        },
        depth: {
          light: '',
          normal: '',
          dark: ''
        },
        size: {
          xss: {
            base: 'ui-btn-xss',
            leadingAvatarSize: '2xs'
          },
          xs: {
            base: 'ui-btn-xs',
            leadingAvatarSize: '2xs'
          },
          sm: {
            base: 'ui-btn-sm',
            leadingAvatarSize: 'xs'
          },
          md: {
            base: 'ui-btn-md',
            leadingAvatarSize: 'xs'
          },
          lg: {
            base: 'ui-btn-lg',
            leadingAvatarSize: 'md'
          },
          xl: {
            base: 'ui-btn-xl',
            leadingAvatarSize: 'md'
          }
        },
        block: {
          true: {
            base: 'w-full'
          }
        },
        rounded: {
          true: 'rounded-(--ui-border-radius-lg)',
          false: 'rounded-(--ui-btn-radius)'
        },
        leading: {
          true: ''
        },
        active: {
          true: {
            base: ''
          },
          false: {
            base: ''
          }
        },
        useLabel: {
          true: '',
          false: {
            baseLine: 'ps-[4px] pe-[4px]',
            leadingAvatar: 'me-0'
          }
        },
        useDropdown: {
          true: ''
        },
        useWait: {
          true: ''
        },
        useClock: {
          true: ''
        },
        loading: {
          true: ''
        },
        normalCase: {
          true: 'normal-case',
          false: 'uppercase'
        },
        isAir: {
          true: '--air',
          false: ''
        }
      },
      compoundVariants: [
        {
          leading: true,
          useLabel: true,
          useDropdown: false,
          class: {
            baseLine: 'ps-[calc(var(--ui-btn-padding-left)_-_var(--ui-btn-icon-compensation))]'
          }
        },
        {
          leading: false,
          useLabel: true,
          useDropdown: true,
          class: {
            baseLine: 'pe-[calc(var(--ui-btn-padding-right)_-_var(--ui-btn-icon-compensation))]'
          }
        },
        {
          leading: true,
          useLabel: true,
          useDropdown: true,
          class: {
            baseLine: 'ps-[calc(var(--ui-btn-padding-left)_-_var(--ui-btn-icon-compensation))] pe-[calc(var(--ui-btn-padding-right)_-_var(--ui-btn-icon-compensation))]'
          }
        },
        {
          leading: true,
          useLabel: false,
          useDropdown: false,
          class: {
            base: 'w-(--ui-btn-height)'
          }
        }
      ],
      defaultVariants: {
        size: 'md',
        color: 'air-secondary-no-accent',
        depth: 'normal',
        normalCase: true,
        isAir: true
      }
    }
  }
})
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import bitrix24UIPluginVite from '@bitrix24/b24ui-nuxt/vite'

export default defineConfig({
  plugins: [
    vue(),
    bitrix24UIPluginVite({
      b24ui: {
        button: {
          slots: {
            base: 'ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center relative outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight)',
            baseLoading: 'h-full w-full absolute inset-0 flex flex-row flex-nowrap items-center justify-center',
            baseLoadingWaitIcon: 'text-(--ui-btn-color) size-[calc(var(--ui-btn-wait-icon-size)_+_7px)]',
            baseLoadingClockIcon: 'text-(--ui-btn-color) size-[calc(var(--ui-btn-wait-icon-size)_+_7px)]',
            baseLoadingSpinnerIcon: 'text-(--ui-btn-color) size-(--ui-btn-wait-icon-size) animate-spin stroke-2',
            baseLine: 'w-full inline-flex items-center justify-center gap-(--ui-btn-icon-space) ps-(--ui-btn-padding-left) pe-(--ui-btn-padding-right) h-(--ui-btn-height)',
            label: 'h-(--ui-btn-height) max-w-full inline-flex flex-row items-center tracking-(--ui-btn-letter-spacing) overflow-visible text-clip',
            labelInner: 'truncate inline-block max-w-full mt-(--ui-btn-title-compensation)',
            leadingIcon: 'text-(--ui-btn-color) shrink-0 size-(--ui-btn-icon-size)',
            leadingAvatar: 'shrink-0 me-[4px]',
            leadingAvatarSize: '',
            trailingIcon: 'text-(--ui-btn-color) shrink-0 size-(--ui-btn-icon-size) mt-(--ui-btn-title-compensation)',
            safeList: 'invisible'
          },
          variants: {
            fieldGroup: {
              horizontal: 'focus-visible:outline-none ring ring-inset ring-0 focus-visible:ring-2 group-[.is-field-group]/items:not-only:first:rounded-e-none group-[.is-field-group]/items:not-only:last:rounded-s-none group-[.is-field-group]/items:not-last:not-first:rounded-none group-[.is-field-group]/items:not-only:first:border-e-0 group-[.is-field-group]/items:not-only:not-first:border-s-0 focus-visible:z-[1]',
              vertical: 'focus-visible:outline-none ring ring-inset ring-0 focus-visible:ring-2 not-only:first:rounded-b-none not-only:last:rounded-t-none not-last:not-first:rounded-none focus-visible:z-[1]'
            },
            noSplit: {
              false: "group-[.is-field-group]/items:not-only:not-first:after:content-[''] group-[.is-field-group]/items:not-only:not-first:after:absolute group-[.is-field-group]/items:not-only:not-first:after:top-[7px] group-[.is-field-group]/items:not-only:not-first:after:bottom-[6px] group-[.is-field-group]/items:not-only:not-first:after:left-0 group-[.is-field-group]/items:not-only:not-first:after:w-px group-[.is-field-group]/items:not-only:not-first:after:bg-current/30"
            },
            color: {
              'air-primary': '--style-filled',
              'air-primary-success': '--style-filled-success',
              'air-primary-alert': '--style-filled-alert',
              'air-primary-copilot': '--style-filled-copilot',
              'air-secondary': '--style-tinted',
              'air-secondary-alert': '--style-tinted-alert',
              'air-secondary-accent': '--style-outline',
              'air-secondary-accent-1': '--style-outline-accent-1',
              'air-secondary-accent-2': '--style-outline-accent-2',
              'air-secondary-no-accent': '--style-outline-no-accent',
              'air-tertiary': '--style-plain',
              'air-tertiary-accent': '--style-plain-accent',
              'air-tertiary-no-accent': '--style-plain-no-accent',
              'air-selection': '--style-selection',
              'air-boost': {
                base: '--style-filled-boost bg-transparent hover:bg-transparent focus:bg-transparent active:bg-transparent disabled:bg-transparent aria-disabled:bg-transparent from-0% via-58.65% to-100% bg-radial-[110.42%_110.42%_at_-10.42%_31.25%] from-(--ui-color-design-filled-boost-bg-gradient-1) via-(--ui-color-design-filled-boost-bg-gradient-2) to-(--ui-color-design-filled-boost-bg-gradient-3) hover:bg-radial-[110.42%_110.42%_at_-10.42%_31.25%] hover:from-(--hover-color-1) via-(--hover-color-2) hover:via-58.65% hover:to-(--hover-color-3) focus:bg-radial-[110.42%_110.42%_at_-10.42%_31.25%] focus:from-(--hover-color-1) via-(--hover-color-2) focus:via-58.65% to-(--hover-color-3) active:bg-radial-[110.42%_110.42%_at_-10.42%_31.25%] active:from-(--active-color-1) via-(--active-color-2) active:via-58.65% to-(--active-color-3) disabled:bg-radial-[110.42%_110.42%_at_-10.42%_31.25%] disabled:from-(--ui-color-design-filled-boost-bg-gradient-1) via-(--ui-color-design-filled-boost-bg-gradient-2) to-(--ui-color-design-filled-boost-bg-gradient-3) aria-disabled:bg-radial-[110.42%_110.42%_at_-10.42%_31.25%] aria-disabled:from-(--ui-color-design-filled-boost-bg-gradient-1) aria-disabled:via-(--ui-color-design-filled-boost-bg-gradient-2) aria-disabled:to-(--ui-color-design-filled-boost-bg-gradient-3)'
              },
              default: '',
              danger: '',
              success: '',
              warning: '',
              primary: '',
              secondary: '',
              collab: '',
              ai: '',
              link: ''
            },
            depth: {
              light: '',
              normal: '',
              dark: ''
            },
            size: {
              xss: {
                base: 'ui-btn-xss',
                leadingAvatarSize: '2xs'
              },
              xs: {
                base: 'ui-btn-xs',
                leadingAvatarSize: '2xs'
              },
              sm: {
                base: 'ui-btn-sm',
                leadingAvatarSize: 'xs'
              },
              md: {
                base: 'ui-btn-md',
                leadingAvatarSize: 'xs'
              },
              lg: {
                base: 'ui-btn-lg',
                leadingAvatarSize: 'md'
              },
              xl: {
                base: 'ui-btn-xl',
                leadingAvatarSize: 'md'
              }
            },
            block: {
              true: {
                base: 'w-full'
              }
            },
            rounded: {
              true: 'rounded-(--ui-border-radius-lg)',
              false: 'rounded-(--ui-btn-radius)'
            },
            leading: {
              true: ''
            },
            active: {
              true: {
                base: ''
              },
              false: {
                base: ''
              }
            },
            useLabel: {
              true: '',
              false: {
                baseLine: 'ps-[4px] pe-[4px]',
                leadingAvatar: 'me-0'
              }
            },
            useDropdown: {
              true: ''
            },
            useWait: {
              true: ''
            },
            useClock: {
              true: ''
            },
            loading: {
              true: ''
            },
            normalCase: {
              true: 'normal-case',
              false: 'uppercase'
            },
            isAir: {
              true: '--air',
              false: ''
            }
          },
          compoundVariants: [
            {
              leading: true,
              useLabel: true,
              useDropdown: false,
              class: {
                baseLine: 'ps-[calc(var(--ui-btn-padding-left)_-_var(--ui-btn-icon-compensation))]'
              }
            },
            {
              leading: false,
              useLabel: true,
              useDropdown: true,
              class: {
                baseLine: 'pe-[calc(var(--ui-btn-padding-right)_-_var(--ui-btn-icon-compensation))]'
              }
            },
            {
              leading: true,
              useLabel: true,
              useDropdown: true,
              class: {
                baseLine: 'ps-[calc(var(--ui-btn-padding-left)_-_var(--ui-btn-icon-compensation))] pe-[calc(var(--ui-btn-padding-right)_-_var(--ui-btn-icon-compensation))]'
              }
            },
            {
              leading: true,
              useLabel: false,
              useDropdown: false,
              class: {
                base: 'w-(--ui-btn-height)'
              }
            }
          ],
          defaultVariants: {
            size: 'md',
            color: 'air-secondary-no-accent',
            depth: 'normal',
            normalCase: true,
            isAir: true
          }
        }
      }
    })
  ]
})
Some colors in compoundVariants are omitted for readability. Check out the source code on GitHub.

Banner

Top banner for important user messages.

Calendar

A calendar tool for choosing individual dates, multiple dates, or date spans.

Releases
 Published under MIT License.

Copyright © 2024-present Bitrix24