Skip to content

Button

A button capable of linking or performing an action.

Usage

Label

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

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

You can achieve the same result by using the label prop.

Details
vue
<script setup lang="ts">
export interface ExampleProps {
  label?: string
}

withDefaults(defineProps<ExampleProps>(), {
  label: 'Button'
})
</script>

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

Color

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

Details
vue
<script setup lang="ts">
import type { ButtonProps } from '@bitrix24/b24ui-nuxt/types/index.ts'

export interface ExampleProps {
  color?: ButtonProps['color']
}

withDefaults(defineProps<ExampleProps>(), {
  color: 'default'
})
</script>

<template>
  <B24Button
    :color="color"
  >
    Button
  </B24Button>
</template>

Depth

Use the depth parameter to change the intensity of the Button.

Details
vue
<script setup lang="ts">
import type { ButtonProps } from '@bitrix24/b24ui-nuxt/types/index.ts'

export interface ExampleProps {
  depth?: ButtonProps['depth']
  color?: ButtonProps['color']
}

withDefaults(defineProps<ExampleProps>(), {
  depth: 'dark' as const,
  color: 'default' as const
})
</script>

<template>
  <B24Button
    :color="color"
    :depth="depth"
  >
    Button
  </B24Button>
</template>

Size

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

Details
vue
<script setup lang="ts">
import type { ButtonProps } from '@bitrix24/b24ui-nuxt/types/index.ts'

export interface ExampleProps {
  size?: ButtonProps['size']
}

withDefaults(defineProps<ExampleProps>(), {
  size: 'md' as const
})
</script>

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

Icon

Use the icon prop to show an @bitrix24/b24icons inside the Button.

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

Details
vue
<script setup lang="ts">
import type { ButtonProps } from '@bitrix24/b24ui-nuxt/types/index.ts'
import RocketIcon from '@bitrix24/b24icons-vue/main/RocketIcon'

export interface ExampleProps {
  label?: string
  depth?: ButtonProps['depth']
  color?: ButtonProps['color']
  size?: ButtonProps['size']
}

withDefaults(defineProps<ExampleProps>(), {
  label: 'Button',
  depth: 'dark' as const,
  color: 'default' as const,
  size: 'md' as const
})
</script>

<template>
  <B24Button
    :label="label"
    :color="color"
    :depth="depth"
    :size="size"
    :icon="RocketIcon"
  />
</template>

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

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

<template>
  <B24Button
    use-dropdown
    :icon="RocketIcon"
  >
    Button
  </B24Button>
</template>

Avatar

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

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

Details
vue
<script setup lang="ts">
import type { ButtonProps } from '@bitrix24/b24ui-nuxt/types/index.ts'

export interface ExampleProps {
  label?: string
  depth?: ButtonProps['depth']
  color?: ButtonProps['color']
  size?: ButtonProps['size']
}

withDefaults(defineProps<ExampleProps>(), {
  label: 'Button',
  depth: 'dark' as const,
  color: 'default' as const,
  size: 'md' as const
})
</script>

<template>
  <B24Button
    :label="label"
    :color="color"
    :depth="depth"
    :size="size"
    :avatar="{ src: '/b24ui/avatar/employee.png' }"
  />
</template>

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

Details
vue
<template>
  <B24Button
    to="https://github.com/bitrix24/b24ui/"
    target="_blank"
  >
    Link
  </B24Button>
</template>

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

Details
vue
<template>
  <B24Button
    :active="true"
    :b24ui="{ baseLine: 'justify-center w-[200px]' }"
    color="success"
    depth="normal"
    active-color="danger"
    active-depth="dark"
  >
    Active
  </B24Button>

  <B24Button
    :active="false"
    color="success"
    depth="normal"
    :b24ui="{ baseLine: 'justify-center w-[200px]' }"
    active-color="danger"
    active-depth="dark"
  >
    Inactive
  </B24Button>
</template>

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

Details
vue
<template>
  <B24Button
    :active="true"
    :b24ui="{ baseLine: 'justify-center w-[200px]' }"
    active-class="italic"
    inactive-class="tracking-widest"
  >
    Active
  </B24Button>

  <B24Button
    :active="false"
    :b24ui="{ baseLine: 'justify-center w-[200px]' }"
    active-class="italic"
    inactive-class="tracking-widest"
  >
    Inactive
  </B24Button>
</template>

Loading

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

TIP

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

Details
vue
<script setup lang="ts">
import type { ButtonProps } from '@bitrix24/b24ui-nuxt/types/index.ts'
import RocketIcon from '@bitrix24/b24icons-vue/main/RocketIcon'

export interface ExampleProps {
  label?: string
  depth?: ButtonProps['depth']
  color?: ButtonProps['color']
  size?: ButtonProps['size']
  isLoading?: boolean
}

withDefaults(defineProps<ExampleProps>(), {
  label: 'Button',
  depth: 'dark' as const,
  color: 'default' as const,
  size: 'md' as const,
  isLoading: true
})
</script>

<template>
  <B24Button
    :loading="isLoading"
    :label="label"
    :color="color"
    :depth="depth"
    :size="size"
  />
  <B24Button
    use-clock
    :loading="isLoading"
    :label="label"
    :color="color"
    :depth="depth"
    :size="size"
    :icon="RocketIcon"
  />
  <B24Button
    use-wait
    :loading="isLoading"
    :label="label"
    :color="color"
    :depth="depth"
    :size="size"
    :avatar="{ src: '/b24ui/avatar/employee.png' }"
  />
</template>

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

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

async function onClick() {
  return new Promise<void>(res => setTimeout(res, 1000))
}
</script>

<template>
  <B24Button
    label="Button"
    loading-auto
    @click="onClick"
  />
  <B24Button
    label="Button"
    :icon="RocketIcon"
    use-clock
    loading-auto
    @click="onClick"
  />
  <B24Button
    label="Button"
    :avatar="{ src: '/b24ui/avatar/employee.png' }"
    use-wait
    loading-auto
    @click="onClick"
  />
</template>

This also works with the Form component.

Details
vue
<script setup lang="ts">
import { reactive } from 'vue'

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" color="success" use-clock class="mt-2" loading-auto>
      Submit
    </B24Button>
  </B24Form>
</template>

Disabled

Use the disabled prop to disable the Button.

Details
vue
<script setup lang="ts">
export interface ExampleProps {
  isDisabled?: boolean
}

withDefaults(defineProps<ExampleProps>(), {
  isDisabled: true
})
</script>

<template>
  <B24Button
    label="Button"
    :disabled="isDisabled"
  />
</template>

Rounded

Use the rounded prop to round the Button.

Details
vue
<script setup lang="ts">
export interface ExampleProps {
  isRounded?: boolean
}

withDefaults(defineProps<ExampleProps>(), {
  isRounded: true
})
</script>

<template>
  <B24Button
    label="Button"
    :rounded="isRounded"
  />
</template>

API

Props

INFO

The Button component extends the Link component. Check out the source code on GitHub.

Prop Default Type
as'button'any
The element or component this component should render as when not a link.
labelstring
color'default'"default" | "danger" | "success" | "warning" | "primary" | "secondary" | "collab" | "ai" | "link"
activeColor"default" | "danger" | "success" | "warning" | "primary" | "secondary" | "collab" | "ai" | "link"
depth'normal'"light" | "dark" | "normal"
activeDepth"light" | "dark" | "normal"
size'md'"lg" | "md" | "xs" | "sm"
roundedfalseboolean
Rounds the corners of the button
blockfalseboolean
Render the button full width
loadingAutofalseboolean
Set loading state automatically based on the `@click` promise state
normalCasefalseboolean
Disable uppercase label
useWaitfalseboolean
Shows LoaderWaitIcon in loading mode
useClockfalseboolean
Shows LoaderClockIcon icon in loading mode
useDropdownfalseboolean
Shows icons.chevronDown on the right side
b24ui{ base?: ClassNameValue; baseLine?: ClassNameValue; label?: ClassNameValue; leadingIcon?: ClassNameValue; leadingAvatar?: ClassNameValue; leadingAvatarSize?: ClassNameValue; trailingIcon?: ClassNameValue; safeList?: ClassNameValue; }
loadingboolean
When `true`, the loading icon will be displayed.
iconicons.loading(props: HTMLAttributes & VNodeProps & {}, ctx: Omit<{ attrs: Data; slots: Readonly<InternalSlots>; emit: (event: string, ...args: any[]) => void; expose: <Exposed extends Record<string, any> = Record<...>>(exposed?: Exposed) => void; }, "expose">): any
Display an icon on the left side.
avatarAvatarProps
Display an avatar on the left side.
type"button""reset" | "submit" | "button"
The type of the button when not a link.
tostring | RouteLocationAsRelativeGeneric | RouteLocationAsPathGeneric
Route Location the link should navigate to when clicked on.
viewTransitionboolean
Pass the returned promise of `router.push()` to `document.startViewTransition()` if supported.
disabledboolean
activeundefinedboolean
Force the link to be active independent of the current route.
isActionboolean
When `true`, uses special underlined styling.
targetnull | "_blank" | "_parent" | "_self" | "_top" | string & {}
Where to display the linked URL as the name for a browsing context.

Slots

Slot Type
leading{}
default{}
trailing{}

Released under the MIT License.