Vivid API

Fab

Floating Action Button (FAB) is an action button that floats above the user interface and should be used for actions that stands out among the rest of the UI.

Usage

import { registerFab } from '@vonage/vivid-api';


registerFab('your-prefix');

Slots

Icon Slot

Use the icon slot to customise icons. If set, the icon (deprecated) attribute is ignored.

API Reference

Properties

PropertyTypeDefaultDescription
autofocusbooleanDetermines if the element should receive document focus on page load.
connotation'accent' | 'cta' | 'announcement'The connotation the Fab should have.
disabledbooleanSets the element's disabled state. A disabled element will not be included during form submission.
formIdstringThe id of a form to associate the element to.
formactionstringSee https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button | <button> element for more details.
formenctypestringSee https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button | <button> element for more details.
formmethodstringSee https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button | <button> element for more details.
formnovalidatebooleanSee https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button | <button> element for more details.
formtarget'_self' | '_blank' | '_parent' | '_top'See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button | <button> element for more details.
iconTrailingbooleanIndicates the icon affix alignment.
initialValuestringThe default value of the element. This value sets the `value` property only when the `value` property has not been explicitly set.
labelstringIndicates the Fab's label.
namestringThe name of the element. This element's value will be surfaced during form submission under the provided name.
requiredbooleanRequire the field to be completed prior to form submission.
size'condensed' | 'normal' | 'expanded'The size the Fab should have.
type'button' | 'reset' | 'submit'The button type.
valuestringThe current value of the element.
PropertyTypeDefaultDescription
autofocusbooleanDetermines if the element should receive document focus on page load.
connotation'accent' | 'cta' | 'announcement'The connotation the Fab should have.
disabledbooleanSets the element's disabled state. A disabled element will not be included during form submission.
formstringThe id of a form to associate the element to.
formactionstringSee https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button | <button> element for more details.
formenctypestringSee https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button | <button> element for more details.
formmethodstringSee https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button | <button> element for more details.
formnovalidatebooleanSee https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button | <button> element for more details.
formtarget'_self' | '_blank' | '_parent' | '_top'See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button | <button> element for more details.
icon-trailingbooleanIndicates the icon affix alignment.
valuestringThe default value of the element. This value sets the `value` property only when the `value` property has not been explicitly set.
labelstringIndicates the Fab's label.
namestringThe name of the element. This element's value will be surfaced during form submission under the provided name.
requiredbooleanRequire the field to be completed prior to form submission.
size'condensed' | 'normal' | 'expanded'The size the Fab should have.
type'button' | 'reset' | 'submit'The button type.
current-valuestringThe current value of the element.

Slots

NameDescription
iconThe preferred way to add an icon to the component.
NameDescription
iconThe preferred way to add an icon to the component.

Methods

NameParamsReturnsDescription
checkValiditybooleanReturn the current validity of the element.
reportValiditybooleanReturn the current validity of the element. If false, fires an invalid event at the element.
validatevoid{@inheritDoc (FormAssociated:interface).validate}