Button

BsButton is a component for actions in form, dialog, and more with support for a handful of color variations, sizes, states, and more.

Overview

BsButton uses Boostrap CSS classes internally, and made some modifications to meet the Google Material Design 3 specifications.

Updated on v2.0.0

TIP

Any MDBootstrap Color variants and Material Color variants can be applied to the color property.

States

<bs-button> component has states: active, disabled and readonly. Use their respective property to enable the state.

Element Type

<bs-button> component by default renders a <button> element. However, you can also render an <a> element by providing href attribute value. You can also change the button's type attribute with specific value, such as button, submit, or reset.

Link

Style Variants

You can style the <bs-button> to your own preference or use a style variant based on Google Material Design 3 specifications.

Filled

This style is the default button's style and its appearance is like Material Design 3 - Filled Button.

Updated on v2.0.0

Filled Tonal

You can create button with filled tonal style like Material Design 3 - Filled Tonal Button by defining the tonal property explicitly.

Added since v2.0.4

Filled Elevated

You can create button with elevated style like Material Design 3 - Elevated Button by defining the raised property explicitly.

Updated on v2.0.0

Filled Rounded

You can create button with rounded style by defining the rounded property explicitly and sets the pill property to false.

Filled Rectangle

You can create button with rectangle style by setting the pill property to false.

Outlined

You can create button with outlined style like Material Design 3 - Outlined Button by defining the outlined property explicitly.

Updated on v2.0.0

Flat

You can create button with flat style like Material Design 3 - Text Button by defining the flat property explicitly.

Updated on v2.0.0

Combination

Other than those styles above, some styles can be combine to create another effect. Example below will shows you how to do it.

TIP

• outlined and flat property can't be combined. If both true, then outlined will take precedence.
• pill and rounded property can't be combined. If both true, then pill will take precedence.
• When the tonal property is set to true or defined, outlined and flat are automatically disabled.

Icon

<bs-button> can have an icon inside it. The icon can be positioned on the left side (before text) or on the right side (after text) using icon-position property.

Use icon property to display an icon and sets the value to a valid android icon name from Google Material Symbols with or without a suffix. Valid suffixes are: _outlined, _rounded, _sharp, _filled, _outlined_filled, _rounded_filled, and _sharp_filled. Suffix _filled and _outlined_filled will display the same icon variant.

Beside using suffix, property icon-variant can also be used to set the icon variant. Valid values are: outlined (default), rounded, sharp, filled, outlined_filled, rounded_filled, and sharp_filled. Suffix will take precedence over icon-variant property.

Additionally custom icon can also be displayed using the icon slot and the icon property must be omitted.

Updated on v2.1.0

INFO

Since Vue MDBootstrap v2.1.0, Google Material Icons are replaced with Google Material Symbols.

Rotating an icon

Additionally, you can also rotate the icon to some extent. Use icon-flip property or icon-rotation property to rotate the icon, but do not use both property together.

Animating an icon

<bs-button> also has built-in animations for icon, which are: spin and pulse. Example below, demonstrate the built-in icon animation and the use of icon slot.

Sizes

<bs-button> can be set to different size: xs (extra-small), sm (small), or lg (large).

TIP

If you use <bs-button> other than standard/default button size and you have an icon inside it, then you have to adjust the icon size using the icon-size property.

Icon Button

With <bs-button> you can also create icon button like Google Material Design 3 - Icon Button. Just use the mode property with value icon, <bs-button> will be rendered as icon button.

FAB

<bs-button> can also create FAB's button like Google Material Design 3 - FAB with just simple step. Use the mode property with value fab, <bs-button> will be rendered as FAB's button. The only downside is, <bs-button> doesn't have the ability to automatically position itself on the screen. You have to manually adjust its position on the screen using css helper or make your own css to adjust its position.

Added since v2.0.4

Extended FAB

Navigate

Navigate

Navigate

Navigate

Navigate

Navigate

Navigate

Navigate

Button Group

<bs-button> can be grouped as series of buttons on a single line called button group by utilizing Bootstrap CSS.

Updated on v2.0.4

With dropdown menus

You can add dropdown menus mixed with a series of buttons inside .btn-group.

Added since v2.0.4

Button toolbar

<bs-button> can also be combined as sets of button groups called button toolbar by utilizing Bootstrap CSS.

Usage Example

The following are a collection of examples that demonstrate more advanced use of the <bs-button>.

Order menu item

Pork bao buns

$7.95

Made with barbeque-flavored sha siu pork and steamed to perfection, these pork buns are our most popular menu items.

Join video conference

Join Conference

Etiqutte for the Internet

Two persons has joined.

CSS Variables

The component css variables inherited from Bootstrap buttons css variables with some modifications and additions.

Added since v2.0.0

--bs-btn-font-family: #{$body-font-family};
--bs-btn-font-size: 1rem;
--bs-btn-font-weight: 400;
--bs-btn-line-height: 1.5;
--bs-btn-disabled-opacity: 0.65;
--bs-btn-readonly-opacity: 0.75;
--bs-btn-border-radius: #{$btn-border-radius};
--bs-btn-border-width: 1px;

--bs-btn-bg: #{$btn-bg-color};
--bs-btn-color: #{$btn-text-color};
--bs-btn-border-color: #{$btn-border-color};
--bs-btn-active-bg: #{$btn-bg-color};
--bs-btn-active-color: #{$btn-text-color};
--bs-btn-active-border-color: #{$btn-border-color};
--bs-btn-disabled-bg: #{lighten($gray-500, 20%)};
--bs-btn-disabled-color: #{$gray-700};
--bs-btn-disabled-border-color: #{$lighten($gray-500, 8%)};
--bs-btn-hover-bg: #{$btn-bg-color};
--bs-btn-hover-color: #{$btn-text-color};
--bs-btn-hover-border-color: #{$btn-border-color};

--bs-btn-inner-padding-x: 1.5rem;
--bs-btn-inner-padding-y: 0.425rem;
--bs-btn-lg-inner-padding-x: 1.5rem;
--bs-btn-lg-inner-padding-y: 0.5rem;
--bs-btn-sm-inner-padding-x: 1rem;
--bs-btn-sm-inner-padding-y: 0.4rem;
--bs-btn-xs-inner-padding-x: 0.75rem;
--bs-btn-xs-inner-padding-y: 0.375rem;

--bs-btn-initial-box-shadow: none;
--bs-btn-active-box-shadow: 0 1px 2px 0 rgba(50, 50, 50, 0.35), 0 2px 4px 2px rgba(10, 10, 10, 0.05);
--bs-btn-focus-box-shadow: 0 1px 2px 0 rgba(50, 50, 50, 0.35), 0 2px 4px 2px rgba(10, 10, 10, 0.05);
--bs-btn-hover-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 4px 8px 0 rgba(0, 0, 0, 0.12);

Icon button

Most css variables are inherited from button css variables.

--bs-btn-border-radius: 50%;
--bs-btn-line-height: 2.25rem;
--bs-btn-lg-line-height: 3.5rem;
--bs-btn-sm-line-height: 2rem;
--bs-btn-xs-line-height: 1.5rem;

--bs-btn-height: 2.75rem;
--bs-btn-width: 2.75rem;
--bs-btn-lg-height: 3.5rem;
--bs-btn-lg-width: 3.5rem;
--bs-btn-sm-height: 2rem;
--bs-btn-sm-width: 2rem;
--bs-btn-xs-height: 1.5rem;
--bs-btn-xs-width: 1.5rem;

API Reference

Property	Type	Default	Description
active	Boolean	false	The component state.
disabled	Boolean	false	The component state.
color	String	'default'	The component color appearance. Any MDBootstrap Color variants and Material Color variants can be used.
dropdown-toggle	Boolean	false	Render as dropdown button when used inside <bs-dropdown-menu> component.
flat	Boolean	false	Enable flat button style.
href	String		Render as <a> element and define its href property and apply button styles to the <a> element.
icon	String		Icon to display inside the component. Updated on v2.1.0 Use any valid android icon name from Google Material Symbols with or without a suffix. Valid suffixes are: _outlined, _rounded, _sharp, _filled, _outlined_filled, _rounded_filled, and _sharp_filled. Suffix will take precedence over icon-variant property.
icon-flip	String		Flip the icon. Valid values are: horizontal, vertical, both.
icon-position	String	'left'	The icon placement. Valid values are: left (before text), right (after text).
icon-pulse	Boolean	false	Apply pulse animation to the icon.
icon-rotation	Number		Rotate the icon. Valid values are: 90, 180, 270.
icon-size	Number		Render the icon at predefined size in pixel.
icon-spin	Boolean	false	Apply spin animation to the icon.
icon-variant	String	'outlined'	Use predefined icon style variant. Valid values are: outlined, rounded, sharp, filled, outlined_filled, rounded_filled, and sharp_filled. v2.1.0 See Icon section for details.
mode	String	'default'	Create the component with spesific style variant. Valid values are: default, icon, fab.
outlined	Boolean	false	Enable outlined button style.
pill	Boolean	true	Enable rounded-pill button style.
raised	Boolean	false	Enable elevated button style.
readonly	Boolean	false	The component state. v2.0.0
ripple-off	Boolean	false	Disable ripple effect.
rounded	Boolean	false	Enable rounded button style.
size	String		Create the component with predefined size. Valid values are: xs, sm, lg.
tonal	Boolean	false	Enable filled tonal button style. v2.0.4
type	String	'button'	Sets the value to the type attribute of <button> element . Valid values are: button, submit, reset.

Name	Description
default	The outlet slot used to place the main content.
icon	The outlet slot used to place custom icon. v2.0.1