Constructor options

These are global default options, which are set on Buefy initialization

Full bundle
Vue.use(Buefy, {
    defaultIconPack: 'fas',
    // ...
Individual components
import { ConfigProgrammatic, Table, Input } from 'buefy'

    defaultIconPack: 'fas',
    // ...
CDN bundle
// When using CDN, Buefy automatically attaches itself on Vue
    defaultIconPack: 'fas',
    // ...


defaultIconPackIcon pack used internally and on the Icon component attribute — Material Design Icons or FontAwesome 4 or FontAwesome 5Stringmdi, fa, fas, far, fadmdi
defaultIconComponentComponent used to render the Icon. Can be used to render FontAwesome 5 icons with the vue-fontawesome componentComponentFontAwesomeIcon component name
defaultStatusIconAutomatically show status icon on input componentBooleantrue
defaultIconPrevIcon used internally for prev. — Used in Datepicker, Pagination and Steps for exampleStringchevron-left
defaultIconNextIcon used internally for next. — Used in Datepicker, Pagination and Steps for exampleStringchevron-right
defaultLocaleWill be used for default date and number formatting. Accept a string with a BCP 47 language tag, or an array of such strings. See Unicode BCP 47 locale identifierString, Array of Stringundefined: default to browser locale.
defaultContainerElementDefault container attribute for floating Notices (Toasts & Snackbars). Note that this also changes the position of the Notices from fixed to absolute. Meaning that the container should be fixed.Stringbody
defaultDialogConfirmTextDefault dialog confirmText attributeStringOK
defaultDialogCancelTextDefault dialog cancelText attributeStringCancel
defaultSnackbarDurationDefault snackbar duration attribute.Number3500
defaultSnackbarPositionDefault snackbar position attribute.Stringis-top-right, is-top, is-top-left, is-bottom-right, is-bottom, is-bottom-leftis-bottom-right
defaultToastDurationDefault toast duration attribute.Number2000
defaultToastPositionDefault toast position attribute.Stringis-top-right, is-top, is-top-left, is-bottom-right, is-bottom, is-bottom-leftis-top
defaultNotificationDurationDefault notification duration attribute.Number2000
defaultNotificationPositionDefault notification position attribute for programmatically opening.Stringis-top-right, is-top, is-top-left, is-bottom-right, is-bottom, is-bottom-leftis-bottom-right
defaultTooltipTypeDefault tooltip type (color) attribute.Stringis-white, is-black, is-light, is-dark, is-primary, is-info, is-success, is-warning, is-danger, and any other colors you've set in the $colors list on Sassis-primary
defaultTooltipDelayDefault tooltip delay attribute.Number
defaultInputAutocompleteDefault input autocomplete attribute.Stringon, offon
defaultDateFormatterDefault datepicker date-formatter attributeFunction(date) => new Intl.DateTimeFormat(locale).format(date)
defaultDateParserDefault datepicker date-parser attributeFunctionTries to parse the date using the locale specific format. Fallback to Date.parse
defaultDateCreatorDefault datepicker date-creator attributeFunctionnew Date()
defaultDayNamesDefault datepicker day-names attributeArraydefault to browser locale
defaultMonthNamesDefault datepicker month-names attributeArraydefault to browser locale
defaultFirstDayOfWeekDefault datepicker first-day-of-week attributeNumber0
defaultUnselectableDaysOfWeekDefault datepicker unselectable-days-of-week attributeArray
defaultTimeFormatterDefault timepicker time-formatter attributeFunctionHH:mm or HH:mm AM/PM
defaultTimeParserDefault timepicker time-parser attributeFunctionHH:mm or HH:mm AM/PM
defaultModalCanCancelDefault modal canCancel attributeBoolean, Arrayescape, x, outside, button['escape', 'x', 'outside', 'button']
defaultModalScrollDefault modal/dialog scroll attributeStringclip, keepclip
defaultDatepickerMobileNativeDefault native datepicker on mobileBooleantrue
defaultTimepickerMobileNativeDefault native timepicker on mobileBooleantrue
defaultNoticeQueueDefault snackbar/toast/notification queue attributeBooleantrue
defaultInputHasCounterDefault input has-counter attributeBooleantrue
defaultTaginputHasCounterDefault taginput has-counter attributeBooleantrue
defaultUseHtml5ValidationDefault form components use-html5-validation attributeBooleantrue
defaultFieldLabelPositionDefault field position of labelStringinside,on-border
defaultDatepickerYearsRangeDefault years range relative to selected yearArray[-100, 3]
defaultDatepickerNearbyMonthDaysShow/Hide nearby month days (prev and next month)Booleantrue
defaultDatepickerNearbySelectableMonthDaysIt allows to select/unselect nearby month daysBooleanfalse
defaultDatepickerShowWeekNumberIt allows to display week numberBooleanfalse
customIconPacksAllows you to define your own custom icon pack to be used in Buefy.Object
defaultClockpickerHoursLabelDefault clockpicker hours-label attributeStringHours
defaultClockpickerMinutesLabelDefault clockpicker minutes-label attributeStringMin
defaultTrapFocusDefault config to trap focus inside components (Dialog, Dropdown and Modal).Booleantrue
defaultButtonRoundedDefault config to make all buttons rounded.Booleanfalse
defaultSwitchRoundedDefault config to make all switch rounded.Booleantrue
defaultCarouselIntervalDefault carousel interval attributeNumber3500
defaultTabsExpandedDefault tabs expanded attributeBooleanfalse
defaultTabsAnimatedDefault tabs animated attributeBooleantrue
defaultTabsTypeDefault tabs type attributeStringis-boxed, is-toggle
defaultProgrammaticPromiseReturn a promise using programmatic componentBooleanfalse
defaultLinkTagsDefault link tags accepted as tag in some component (Button, MenuItem, PaginationButton). Can be used when using custom component or other Vue Router plugin like inertia.string[a, button, input, router-link, nuxt-link, n-link, RouterLink, NuxtLink, NLink]
defaultBreadcrumbTagDefault link tags accepted as tag in Breadcrumb component. Can be used when using custom component or other Vue Router plugin like inertia.string[a, button, input, router-link, nuxt-link, n-link, RouterLink, NuxtLink, NLink]
defaultImageWebpFallbackFallback when using webp format. You can specify an extension only (.jpg, .jpeg, .png, .gif) if the filename is the same. You can use a full url if not.String
defaultImageLazyUse IntersectionObserver to display the image only when in viewport.Booleantrue
defaultImageResponsiveThe image will take 100% of the parent width. Use this with ratio to prevent page jump when images are loading.Booleantrue
defaultImageRatioThe space will be reserved. Prevent page jump when images are loading when using responsive.String1by1, 5by4, 4by3, 3by2, 5by3, 16by9, 2by1, 3by1, 4by5, 3by4, 2by3, 3by5, 9by16, 1by2 1by3 or any string having this format {number}by{number}
defaultImageSrcsetFormatterFunction to format src according to a given size.Function(src, size) => `${srcFilename}-${size}.${srcExt}`

This page is open source. Noticed a typo or something's unclear?

Improve this page on GitHub