Bearer

The Bearer Documentation Hub

Welcome to the Bearer documentation hub. You'll find comprehensive guides and documentation to help you start working with Bearer as quickly as possible, as well as support if you get stuck. Let's jump right in!

Get Started    Changelog

Basic Components

Reload this page 😅

Due to issues with Readme.io, make sure to force reload this page (F5) in order to see the components showing up, sorry for the inconvenience.

Alert

<bearer-alert kind="primary">This is a primary alert message</bearer-alert>
This is a primary alert message This is a secondary alert message This is a success alert message This is a danger alert message This is a warning alert message This is an info alert message This is a light alert message

The <bearer-alert/> component offers configurable properties:

  • onDismiss: TODO Usage
  • kind: Alert style ('primary', 'secondary', 'success', 'danger', 'warning', 'info' or 'light')

Button

<bearer-button kind="primary">This is a primary button</bearer-button>
This is an embed button This is a primary button This is a secondary button This is a danger button This is an error button

The <bearer-button/> component offers configurable properties:

  • kind: Button style ('embed', 'primary', 'secondary', 'danger', 'error'), default to primary

Popover Button

<bearer-button-popover direction="right" header="Popover Title" btnProps={{ content: 'This is a popover button', kind: 'primary' }}>Content of the popover</bearer-button-popover>

The <bearer-button-popover/> component offers configurable properties:

  • direction: Direction of the opening of the popover (top, bottom, right or left)
  • arrow: Presence of arrow between the popover button and its content
  • header: Popover header
  • btnProps
    • content: Content of the popover button
    • kind: Popover button style ('primary', 'secondary', 'success', 'danger', 'warning', 'info', 'light' or 'dark')

DropDown Button

<bearer-dropdown-button btnProps={{ kind: 'secondary', content:'This is a dropdown button' }}>Content of the popover</bearer-dropdown-button>

The <bearer-dropdown-button/> component offers configurable properties:

  • opened: Default opening behavior ('true' or 'false')
  • innerListener: TODO
  • btnProps
    • content: Content of the popover button
    • kind: Dropdown button style ('primary', 'secondary', 'success', 'danger', 'warning', 'info', 'light' or 'dark')

Badge

<bearer-badge kind="primary">This is a primary badge</bearer-badge>
This is a primary badge This is a secondary badge This is a success badge This is a danger badge This is a warning badge This is an info badge This is a light badge This is a Dark badge

The <bearer-badge/> component offers configurable properties:

  • kind: Button style ('primary', 'secondary', 'success', 'danger', 'warning', 'info' or 'light')

Loader

<bearer-loading></bearer-loading>

Typography

<bearer-typography kind="h1">This is a h1</bearer-typography>
This is a h1 This is a h2 This is a h3 This is a h4 This is a h5 This is a h6 This is a text muted This is a display 1 This is a display 2 This is a display 3 This is a display 4

The <bearer-typography/> component offers configurable properties:

  • kind: HTML style ('h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'text-muted', 'display-1', 'display-2', 'display-3' or 'display-4')

Forms

Don't use the Form components below for now, instead use standard HTML form tags.

Input

<bearer-input type="text" />

<bearer-input /> component offers configurable properties:

  • type: Type of input ('text', 'email', 'password' or 'tel')
  • label: self explanatory
  • controlName: TODO
  • value: Default value
  • hint: self explanatory
  • placeholder: self explanatory
  • onValueChange: self explanatory
  • onInputClick: self explanatory

TextArea

<bearer-textarea />

<bearer-textarea /> component offers configurable properties:

  • label: self explanatory
  • controlName: TODO
  • value: Default value
  • hint: self explanatory
  • placeholder: self explanatory
  • onValueChange: self explanatory

Checkbox

<bearer-checkbox />

<bearer-chekbox /> component offers configurable properties:

  • label: self explanatory
  • controlName: TODO
  • value: Default value
  • buttons: TODO
  • inline: TODO
  • onValueChange: self explanatory

Radio

<bearer-radio />

TODO

Select

<bearer-select />

TODO