v2.1.8
/
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.

{
  "wait": "Loading client-side content..."
}

Label

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

{
  "wait": "Loading client-side content..."
}

Color

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

{
  "wait": "Loading client-side content..."
}

Size

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

{
  "wait": "Loading client-side content..."
}

Icon

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

{
  "wait": "Loading client-side content..."
}

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

{
  "wait": "Loading client-side content..."
}

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

{
  "wait": "Loading client-side content..."
}

Avatar

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

{
  "wait": "Loading client-side content..."
}

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

{
  "wait": "Loading client-side content..."
}

Link

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

Button
{
  "wait": "Loading client-side content..."
}

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

{
  "wait": "Loading client-side content..."
}

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

{
  "wait": "Loading client-side content..."
}

Loading

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

{
  "wait": "Loading client-side content..."
}

Use the loading-auto prop to show the loading icon automatically while the @click promise is pending.

{
  "wait": "Loading client-side content..."
}

This also works with the Form component.

{
  "wait": "Loading client-side content..."
}

Loading Icon

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

{
  "wait": "Loading client-side content..."
}

Disabled

Use the disabled prop to disable the Button.

{
  "wait": "Loading client-side content..."
}

Rounded

Use the rounded prop to round the Button.

{
  "wait": "Loading client-side content..."
}

Block

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

{
  "wait": "Loading client-side content..."
}

NormalCase

Use the normalCase property to set uppercase for the Button.

{
  "wait": "Loading client-side content..."
}

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 "append" | "remove"

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