ByltButton
import { ByltButton } from '@bbc/front-end-kit/vue'
Generic button to use in Vue projects.
ByltButton catches click events and passes them to the router instance using the push method. It does not use RouterLink like some other components.
Info
Button is a reserved keyword, hence the name 'ByltButton'
Getting started
<template>
<ByltButton>Label</ByltButton>
</template>
<script setup>
import { ByltButton } from '@bbc/front-end-kit/vue'
</script>
Preview
API
Properties
href
The href attribute to use for the button.
Values: string
Default: null
label
Another way to set the label of the button. Slot content has priority — when both are provided, only slot content is shown.
Values: String
Default: null
labelProps
Object with attribute contents that need to be applied to the label wrapper of the button.
Values: Object
Default: {}
PrefixIcon
Sets the icon before the label inside the button.
Values: Vue Component
Default: null
prefixIconProps
Object with attribute contents that need to be applied to the provided PrefixIcon element.
Values: Object
Default: {}
SuffixIcon
Sets the icon after the label inside the button.
Values: Vue Component
Default: null
suffixIconProps
Object with attribute contents that need to be applied to the provided SuffixIcon element.
Values: Object
Default: {}
to
The route to link to in the Vue app. When provided, click events call router.push(to) instead of navigating via href.
Values: String | Route Object
Default: null
type
The type of HTML element to render.
submit and reset both render a <button> element with the corresponding type attribute.
Values: a, span, button, submit, reset
Default: a
Icon (deprecated)
Deprecated in favour of PrefixIcon. Sets the icon before the label.
Values: Object
Default: null
iconProps (deprecated)
Deprecated in favour of prefixIconProps. Object with attribute contents for the deprecated Icon element.
Values: Object
Default: null
Exposed properties
$label
The template ref to the label wrapper element.
Values: TemplateRef
Slots
default
The contents inside the label wrapper of the element. Takes priority over the label prop.