Button

Probably the most used ui element in web apps

Use button component when user needs to confirm or click to perform any action. Do not use buttons for navigation to other urls, for this purposes use anchor tag <a>.

Variants

When properly used, variants create a sense of hierarchy and give context to action that is about to be performed. For example, try not to use success variant on buttons that perform deletion.

Also, primary variant should be reserved for the 'primary' action in the page section, so try to have only one primary button on page or modal, if possible.

Default variant is plain.

Outlined variants

In addition to above mentioned variants, there are outlined versions. Use them in conjunction with filled variants for secondary actions.

Button sizes

There are 5 possible button sizes: exsm, sm, normal, lg, xl. Default size is normal.

Style modifiers

Corners are rounded by default on all buttons, but if you need your buttons to look like pills or have non-rounded corners, simply add rounded or squared props.

If you need a button that will take the 100% width of parent container, add block prop.

Icons

Depending on the button function, you'll want to add an icon to it. You could do it by adding the icon directly into the text, for example:

<bdn-button variant="primary">
  <i class="icon-person"></i> Users
</bdn-button>

But to keep optical balance of button element, you can also use prop icon. Also, buttons with icons and without text will be perfect square or circle, which is not the case if you don't add an icon through this prop.

---

Loading state

When performing operations that take some time to finis, for example fetching data from API, you'll want to disable the button, so it's not clickable until the operation finished. While you can do this by simply setting the disabled prop to true, you can leverage another built-in functionality that adds a bit of animation to notify the users that something is going on.

Custom colors

In cases when you want to use button color that is not covered with variants, you could do it through CSS of course, but you can also use the custom-background-color and custom-text-color props. Ripple effect color will be automatically calculated using those two props.

These props accept any valid CSS color code, hex, rgb, hsl etc.

Events reference

Event name	Description
click	Triggered when user clicks the button
mousedown	Triggered on mouse down
mouseup	Triggered on mouse up
mouseover	Triggered on mouse over
mouseenter	Triggered on mouse enter
mouseleave	Triggered on mouse leave

Props reference

Property	Type	Default	Accepts	Description
disabled	Boolean	false	true or false	Denotes if button is disabled
loading	Boolean	false	true or false	Denotes if there is a waiting time after clicking the button. Button is disabled as long as this prop is true
icon	String	empty	Any string	A string that will be inserted in class for <i></i> element, usually you have this as an icon class, for example icon-person and such
variant	String	md	primary, secondary, plain, danger, success, warning, info, transparent, text, primary-outline, secondary-outline, danger-outline, success-outline, warning-outline, info-outline	Color variant of the button
size	String	normal	exsm, sm, normal, lg, xl	Size of the button
type	String	'button'	button, submit	Native HTML type for buttons and inputs. When in form element, button with type submit will submit the form on click.
pill	Boolean	false	true or false	Determines if button has fully rounded corners
squared	Boolean	false	true or false	Determines if button has sharp edge corners
block	Boolean	false	true or false	Determines if button should take up 100% of parent container width
custom-background-color	String	empty	Valid color code	Custom background color for button
custom-text-color	String	empty	Valid color code	Custom text and icon color for button
ripple	Boolean	true	true or false	Determines if button should have ripple effect