Banquette
On this page

Button

Your typical button.

Basic

Buttons in their default state.


    Disabled

    Disabled buttons. You can control if a button is disabled using the disabled prop.


      Working

      A button can also be working, in which case a loader is shown next to the text. You can control if a button is disabled using the working prop.

        TIP

        A working button doesn't have to be disabled, that's two different properties.


        Buttons have a toggle slot that is shown/hidden by the button when a click is made (if a content have been defined for the slot).

        You can use this to create a dropdown for example:


          Group

          Button can be grouped together into a group.


            Play with it

            Here is a demo where you can set the variants you want from the default theme and see in real time what it looks like.


              Props

              Method Description Default
              href
              		The URL to redirect to when the button is clicked.
              If defined, the root component will be a <a> instead of a <button>.              		 null
              target
              		Define the target attribute of the root element.
              Possible values are: _blank, _self, _parent, _top.
              Only applicable if href is defined and thus the root element is a <a>.              		 null
              disabled
              		When true, the button is grayed out and non-interactive. false
              working
              		When true the button is disabled and indicates that it's doing something by replacing its content with a loader. false
              working-text
              		A text to show next to the loader when the button is working. null
              working-progress
              		Percentage of progress to pass to the loader when the button is working. If null, the loader progress is undetermined. null
              toggled
              		External toggle for the "toggle" slot. false
              toggle-transition
              		Name of the transition to apply when the toggle slot is shown / hidden. If false, disable the transition. null

              Slots

              Name Description
              default Contain the content of the button when it is not working.

              Props:

              • toggle
                : a function that you can call to show/hide the `toggle` slot.
              working

              Content to show when the button is working. By default this slot contains a loader and the value of the working-text prop, so overriding it will replace all of that.

              Props: none

              working-text

              Content placed next to the slot in the default content of the working slot. By default it contains the value of the working-text prop.

              Props: none

              toggle

              Slot is shown conditionally. Can be controlled via the toggled prop or via the toggle() method.

              Otherwise, by default, the slot is toggled when a mousedown event is captured by the button.

              A use case for this slot is to show a dropdown.

              Props:

              • close
                : a function that you can call to hide the `toggle` slot.

              Theming

              Below the list of all CSS variables and selectors available to customize the appearance of the component. If you're not familiar on how the theming works, please refer to the VueThemes documentation.

              Variables

              Variable Default Comment
              fontFamily var(--bt-font-family-base) -
              fontSize var(--bt-font-size-base) -
              fontWeight var(--bt-font-weight-medium) -
              borderRadius var(--bt-border-radius-base) -
              borderWidth var(--bt-border-width-base) -
              borderStyle var(--bt-border-style-base) -
              textColor var(--bt-color-primary-contrast) -
              textHoverColor var(--button-text-color) -
              textFocusColor var(--button-text-color) -
              textActiveColor var(--button-text-color) -
              textDisabledColor var(--button-text-color) -
              backgroundColor var(--bt-color-primary) -
              backgroundHoverColor var(--bt-color-primary-400) -
              backgroundFocusColor var(--bt-color-primary-400) -
              backgroundActiveColor var(--bt-color-primary-550) -
              backgroundDisabledColor var(--button-background-color) -
              borderColor var(--button-background-color) -
              borderHoverColor var(--button-background-hover-color) -
              borderFocusColor var(--button-background-focus-color) -
              borderActiveColor var(--button-background-active-color) -
              borderDisabledColor var(--button-border-color) -
              disabledOpacity 0.5 Global opacity of the button when disabled.
              paddingX 1em Horizontal padding for the content.
              paddingY 0.6em Vertical padding for the content.

              Selectors

              Name Comment Pseudo classes Attributes Combinable with
              root The root element.
              		-
              icon Any svg that is part of the button.
              -
              -
              		 root

              Examples:

              cssSelectors: {
    root: {
        backgroundColor: '...'
    },
    'root:focus': {
        color: '...'
    },
    'root[disabled]': {
        opacity: '...'
    },
    'root:hover icon': {
        fill: '...'
    },
    icon: {
        fill: '...'
    }
}