BnBtn ​

BnBtn is a component that can act as a button or an a element.

Basic Usage ​

<bn-btn href="http://example.com" class="mr-2">Link</bn-btn>
<bn-btn @click="alert('Example')" variant="outline">Button</bn-btn>

Sizes ​

For smaller or larger buttons use the size prop. There are three sizes included by default: sm, md and lg.

<bn-btn size="sm">sm</bn-btn>
<bn-btn size="md">md</bn-btn>
<bn-btn size="lg">lg</bn-btn>

Shapes ​

BnBtn has round corners by default, but you can change its shape using the shape prop. There are four different shapes included by default: default, pill, rounded, circle.

<bn-btn>default</bn-btn>
<bn-btn shape="pill">pill</bn-btn>
<bn-btn shape="rounded">rounded</bn-btn>
<bn-btn shape="circle">⭕</bn-btn>

Variants ​

The variant prop is used to change the appearance of the button. There are three variants included by default: default, outline, and no-border.

<bn-btn>default</bn-btn>
<bn-btn variant="outline">outline</bn-btn>
<bn-btn variant="no-border">no border</bn-btn>

Loading State ​

The loading prop is used to indicate the loading state of the button. When loading is true, a spinner icon is displayed on the button.

<bn-btn loading>loading</bn-btn>

Loading with Content Replacement ​

If the loadingReplacesContent prop is set to true, the button's content will be replaced by the loading spinner when loading is true.

<bn-btn loading loadingReplacesContent>loading with content replacement</bn-btn>

Color ​

You can change the color of the button using the color prop.

<bn-btn>base color</bn-btn>
<bn-btn color="lime">lime</bn-btn>

Slots ​

BnBtn provides two slots icon-left and icon-right for adding icons or any custom content to the left or right of the button text respectively.

icon-left Slot ​

The icon-left slot is used to add an icon or any custom content to the left of the button text.

<bn-btn>
  <template #icon-left>
    💖
  </template>
  Button
</bn-btn>

icon-right Slot ​

The icon-right slot is used to add an icon or any custom content to the right of the button text.

<bn-btn>
  Button
  <template #icon-right>
    ✈️
  </template>
</bn-btn>

Loading State with Slots ​

If you're using slots and the loading state is active, the content inside the slots will be hidden and replaced with the loading spinner if loadingReplacesContent is set to true.

<bn-btn loading loadingReplacesContent>
  <template #icon-left>
    💖 <!-- This will be hidden when loading -->
  </template>
  Loading button
  <template #icon-right>
    ✈️ <!-- This will be hidden when loading -->
  </template>
</bn-btn>

classes prop ​

Every component has a classes prop that will accept an object where each key corresponds to an internal element of the component. The value of each key will be the classes that will be applied to that element. For the values, you can use strings, objects or arrays, the same way it works with Vue's class binding.

<bn-btn
  class="bg-purple-600"
  :loading="true"
  :classes="{ loading: 'text-yellow-500' }"
>
  Name
</bn-btn>

Default styles will still be applied, but the classes you provide will take precedence, so you can use this to override any existing style.

The available keys for this component are:

• loading: The loading indicator svg element

Theming, Variants and other props ​

You can change the default appearance or even add variants by editing the configuration of the TailwindCSS plugin.

plugins: [
    require('@tailwindcss/forms'),
    require('@headlessui/tailwindcss'),
    banano.tailwindPlugin({
      theme: {
        BnBtn: {
          '.bn-btn': {
            '@apply bg-green-600': {},
          }
        }
      }
    }),
  ],

Variants and other props ​

Variants, shapes and sizes are simple CSS classes, and you can add more by extending the TailwindCSS configuration.

For example, if you want to add an xs size to the button, you can do so by adding the following:

plugins: [
  require('@tailwindcss/forms'),
  require('@headlessui/tailwindcss'),
  banano.tailwindPlugin({
    theme: {
      BnBtn: {
        '.bn-btn': {
          '&--sizes-xs': {
            '@apply text-xs': {},
            '@apply px-1 py-1': {},
          },
        }
      }
    }
  }),
],

You can find more information about customizing the library in Theme Customization.

API Reference ​

Props ​

Slots ​