Button
Usage
Label
Use the default slot to set the label of the Button.
vue
<template>
<B24Button>Button</B24Button>
</template>1
2
3
2
3
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>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
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>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
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>1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
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>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
Link
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>1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
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>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
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>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
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>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
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>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
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>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
API
Props
INFO
The Button component extends the Link component. Check out the source code on GitHub.
| Prop | Default | Type |
|---|---|---|
as | 'button' | anyThe element or component this component should render as when not a link. |
label | string | |
color | 'default' | "default" | "link" | "danger" | "success" | "warning" | "primary" | "secondary" | "collab" | "ai" |
activeColor | "default" | "link" | "danger" | "success" | "warning" | "primary" | "secondary" | "collab" | "ai" | |
depth | 'normal' | "light" | "normal" | "dark" |
activeDepth | "light" | "normal" | "dark" | |
size | 'md' | "md" | "xs" | "sm" | "lg" |
rounded | false | booleanRounds the corners of the button |
block | false | booleanRender the button full width |
loadingAuto | false | booleanSet loading state automatically based on the `@click` promise state |
normalCase | false | booleanDisable uppercase label |
useWait | false | booleanShows LoaderWaitIcon in loading mode |
useClock | false | booleanShows LoaderClockIcon icon in loading mode |
useDropdown | false | booleanShows icons.chevronDown on the right side |
b24ui | { base?: ClassNameValue; baseLine?: ClassNameValue; label?: ClassNameValue; leadingIcon?: ClassNameValue; leadingAvatar?: ClassNameValue; leadingAvatarSize?: ClassNameValue; trailingIcon?: ClassNameValue; safeList?: ClassNameValue; } | |
icon | icons.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">): anyDisplay an icon on the left side. |
avatar | AvatarPropsDisplay an avatar on the left side. | |
loading | booleanWhen `true`, the loading icon will be displayed. | |
type | "button" | "reset" | "submit" | "button"The type of the button when not a link. |
to | string | RouteLocationAsRelativeGeneric | RouteLocationAsPathGenericRoute Location the link should navigate to when clicked on. | |
viewTransition | booleanPass the returned promise of `router.push()` to `document.startViewTransition()` if supported. | |
disabled | boolean | |
active | undefined | booleanForce the link to be active independent of the current route. |
isAction | booleanWhen `true`, uses special underlined styling. | |
target | null | "_blank" | "_parent" | "_self" | "_top" | string & {}Where to display the linked URL as the name for a browsing context. |
Slots
| Slot | Type |
|---|---|
leading | {} |
default | {} |
trailing | {} |