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
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
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'
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'
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'
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'
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'
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
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'
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" | "danger" | "success" | "warning" | "primary" | "secondary" | "collab" | "ai" | "link" | |
depth | "light" | "normal" | "dark" | |
size | "lg" | "md" | "xs" | "sm" | |
rounded | booleanRounds the corners of the button. | |
block | booleanRender the button full width. | |
loadingAuto | booleanSet loading state automatically based on the `@click` promise state | |
normalCase | booleanDisable uppercase label | |
useWait | booleanShows `Wait` icon in loading mode | |
useClock | booleanShows `Clock` icon in loading mode | |
useDropdown | booleanShows `ChevronDownIcon` icon on the right side | |
b24ui | PartialString<{ base: string[]; baseLine: string; label: string; leadingIcon: string; leadingAvatar: string; leadingAvatarSize: string; trailingIcon: string; }> | |
loading | booleanWhen `true`, the loading icon will be displayed. | |
icon | (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. | |
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 | 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 | {} |