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'
export interface ExampleProps {
color?: ButtonProps['color']
}
withDefaults(defineProps<ExampleProps>(), {
color: 'air-primary' as ButtonProps['color']
})
</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 ​
@deprecate
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 ButtonProps['size']
})
</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
color?: ButtonProps['color']
size?: ButtonProps['size']
}
withDefaults(defineProps<ExampleProps>(), {
label: 'Button',
color: 'air-primary' as ButtonProps['color'],
size: 'md' as ButtonProps['color']
})
</script>
<template>
<B24Button
:label="label"
:color="color"
:size="size"
:icon="RocketIcon"
/>
<B24Button
:color="color"
: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
29
30
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
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
color?: ButtonProps['color']
size?: ButtonProps['size']
}
withDefaults(defineProps<ExampleProps>(), {
label: 'Button',
color: 'air-primary' as ButtonProps['color'],
size: 'md' as ButtonProps['size']
})
</script>
<template>
<B24Button
:label="label"
:color="color"
:size="size"
:avatar="{ src: '/b24ui/avatar/employee.png' }"
/>
<B24Button
:color="color"
: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
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
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
<script setup lang="ts">
import type { ButtonProps } from '@bitrix24/b24ui-nuxt'
export interface ExampleProps {
activeColor?: ButtonProps['color']
}
withDefaults(defineProps<ExampleProps>(), {
activeColor: 'air-primary' as ButtonProps['activeColor']
})
</script>
<template>
<B24Button
:active="true"
:active-color="activeColor"
color="air-primary"
>
Active
</B24Button>
<B24Button
:active="false"
:active-color="activeColor"
color="air-primary"
>
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
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
You can also use the active-class and inactive-class props to customize the active state.
Details
vue
<template>
<B24Button
:active="true"
active-class="italic"
inactive-class="tracking-widest"
>
Active
</B24Button>
<B24Button
:active="false"
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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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
color?: ButtonProps['color']
size?: ButtonProps['size']
isLoading?: boolean
}
withDefaults(defineProps<ExampleProps>(), {
label: 'Button',
color: 'air-primary' as ButtonProps['color'],
size: 'md' as ButtonProps['size'],
isLoading: true
})
</script>
<template>
<B24Button
:loading="isLoading"
:label="label"
:color="color"
:size="size"
/>
<B24Button
use-clock
:loading="isLoading"
:label="label"
:color="color"
:size="size"
:icon="RocketIcon"
/>
<B24Button
use-wait
:loading="isLoading"
:label="label"
:color="color"
: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
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
Use the loading-auto prop to show the loading icon automatically while the @click promise is pending.
Details
vue
<script setup lang="ts">
import type { ButtonProps } from '@bitrix24/b24ui-nuxt'
import RocketIcon from '@bitrix24/b24icons-vue/main/RocketIcon'
export interface ExampleProps {
color?: ButtonProps['color']
size?: ButtonProps['size']
}
withDefaults(defineProps<ExampleProps>(), {
color: 'air-primary' as ButtonProps['color'],
size: 'md' as ButtonProps['size']
})
async function onClick() {
return new Promise<void>(res => setTimeout(res, 1000))
}
</script>
<template>
<B24Button
label="Button"
loading-auto
:color="color"
:size="size"
@click="onClick"
/>
<B24Button
label="Button"
:icon="RocketIcon"
use-clock
loading-auto
:color="color"
:size="size"
@click="onClick"
/>
<B24Button
label="Button"
:avatar="{ src: '/b24ui/avatar/employee.png' }"
use-wait
loading-auto
:color="color"
:size="size"
@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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
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
This also works with the Form component.
Details
vue
<script setup lang="ts">
import { reactive } from 'vue'
import type { ButtonProps } from '@bitrix24/b24ui-nuxt'
export interface ExampleProps {
color?: ButtonProps['color']
size?: ButtonProps['size']
}
withDefaults(defineProps<ExampleProps>(), {
color: 'air-primary' as ButtonProps['color'],
size: 'md' as ButtonProps['size']
})
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="color"
:size="size"
use-clock
loading-auto
label="Submit"
/>
</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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
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
Disabled ​
Use the disabled prop to disable the Button.
Details
vue
<script setup lang="ts">
import type { ButtonProps } from '@bitrix24/b24ui-nuxt'
export interface ExampleProps {
isDisabled?: boolean
color?: ButtonProps['color']
size?: ButtonProps['size']
}
withDefaults(defineProps<ExampleProps>(), {
isDisabled: true,
color: 'air-primary' as ButtonProps['color'],
size: 'md' as ButtonProps['size']
})
</script>
<template>
<B24Button
label="Button"
:disabled="isDisabled"
:color="color"
:size="size"
/>
</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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
Rounded ​
Use the rounded prop to round the 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 {
isRounded?: boolean
color?: ButtonProps['color']
size?: ButtonProps['size']
}
withDefaults(defineProps<ExampleProps>(), {
isRounded: true,
color: 'air-primary' as ButtonProps['color'],
size: 'md' as ButtonProps['size']
})
</script>
<template>
<B24Button
label="Button"
:rounded="isRounded"
:color="color"
:size="size"
/>
<B24Button
:rounded="isRounded"
:color="color"
: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
29
30
31
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
Block ​
Use the block property to set w-full for the 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 {
isBlock?: boolean
color?: ButtonProps['color']
size?: ButtonProps['size']
}
withDefaults(defineProps<ExampleProps>(), {
isBlock: true,
color: 'air-primary' as ButtonProps['color'],
size: 'md' as ButtonProps['size']
})
</script>
<template>
<B24Button
label="Button"
:block="isBlock"
:color="color"
:size="size"
/>
<B24Button
:block="isBlock"
:color="color"
: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
29
30
31
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
NormalCase ​
Use the NormalCase property to set uppercase for the 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 {
isNormalCase?: boolean
color?: ButtonProps['color']
size?: ButtonProps['size']
}
withDefaults(defineProps<ExampleProps>(), {
isNormalCase: true,
color: 'air-primary' as ButtonProps['color'],
size: 'md' as ButtonProps['size']
})
</script>
<template>
<B24Button
label="Button"
:normal-case="isNormalCase"
:color="color"
:size="size"
/>
<B24Button
label="Button"
class="font-thin"
:normal-case="isNormalCase"
:color="color"
: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
29
30
31
32
33
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
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 | 'air-secondary-no-accent' | "default" | "link" | "air-primary" | "air-primary-success" | "air-primary-alert" | "air-primary-copilot" | "air-secondary" | "air-secondary-accent" | "air-secondary-accent-1" | "air-tertiary" | "danger" | "success" | "warning" | "primary" | "secondary" | "collab" | "ai" | "air-secondary-alert" | "air-secondary-accent-2" | "air-selection" | "air-secondary-no-accent" | "air-tertiary-accent" | "air-tertiary-no-accent" | "air-boost" |
activeColor | "default" | "link" | "air-primary" | "air-primary-success" | "air-primary-alert" | "air-primary-copilot" | "air-secondary" | "air-secondary-accent" | "air-secondary-accent-1" | "air-tertiary" | "danger" | "success" | "warning" | "primary" | "secondary" | "collab" | "ai" | "air-secondary-alert" | "air-secondary-accent-2" | "air-selection" | "air-secondary-no-accent" | "air-tertiary-accent" | "air-tertiary-no-accent" | "air-boost" | |
depth | 'normal' | "light" | "normal" | "dark" |
activeDepth | "light" | "normal" | "dark" | |
size | 'md' | "md" | "xs" | "sm" | "lg" | "xl" | "xss" |
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 | true | booleanDisable uppercase label |
useWait | false | booleanShows LoaderWaitIcon in loading mode |
useClock | false | booleanShows LoaderClockIcon icon in loading mode |
useDropdown | false | booleanShows icons.ChevronDownSIcon on the right side |
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 | 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. | |
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; } |
Slots ​
| Slot | Type |
|---|---|
leading | {} |
default | {} |
trailing | {} |