Import
import { ButtonModule } from '@backbase/ui-ang/button'
Usage
Use the standard HTML <button> element with the bbButton directive to provide a default button with the Backbase styling and to access the API of the Backbase button component.
<button bbButton>Button</button>
Inputs
This component is based on the button element and supports all default HTML button props.
|
Prop |
Type |
Default |
|---|---|---|
|
block |
boolean |
false |
|
buttonSize |
"sm" | "md" |
“md" |
|
circle |
boolean |
false |
|
color |
"primary" | "secondary" | "tertiary" | "link-text" | "success" | "danger" | "neutral" | "dark" |
“primary" |
|
type |
"button" | "submit" | "reset" |
“button" |
block
The block input sets whether the button should fill its parent container.
<!-- Full-width button -->
<button bbButton [block]="true">Button</button>
buttonSize
The buttonSize input sets the size of the button to one of the predefined sizes.
<!-- Small-sized button -->
<button bbButton [buttonSize]="'sm'">
Button
</button>
circle
The circle input sets whether the button should be circular. It should only be used when the button contains a single icon and no text label.
<!-- Circular button for icon-only actions -->
<button bbButton [circle]="true">
<bb-icon-ui name="ellipsis-h"></bb-icon-ui>
</button>
color
The color input sets the type of button from the hierarchical and semantic variants available.
Using a custom color
To apply a custom color to a button, set the color input to a custom string value:
- The value must follow the naming convention: btn-yourCustomColor.
- This string will be applied as a CSS class on the button element.
- You are responsible for defining the corresponding CSS class in your styles.
Example:
<!-- Button using a custom color -->
<button bbButton color="'btn-mySpecialBlue'">
Custom Color
</button>
CSS classes
The following utility CSS classes are mostly used for grouping and positioning buttons. Some of the classes may require classes to be present on both the parent (container) and child.
Button Group
The .btn-group class implements a grouped button layout. Wrap the instances of button in a single container and apply the .btn-group class to that parent container to turn them into a button group.
<!-- Standard button group -->
<div class="btn-group m-2">
<button bbButton color="primary">Left</button>
<button bbButton color="secondary">Center</button>
<button bbButton color="secondary">Right</button>
</div>
Button Bar
This set of classes allows grouping multiple instances of button horizontally. A combination of an aligning class with the base bb-button-bar one aligns them on a specific side of the UI.
<!-- Standard button bar -->
<div class="bb-button-bar">
<button bbButton class="bb-button-bar__button">Button</button>
<button bbButton color="tertiary" class="bb-button-bar__button">Button</button>
</div>
<!-- Reversed order -->
<div class="bb-button-bar bb-button-bar--reverse">
<button bbButton class="bb-button-bar__button">Button</button>
<button bbButton color="tertiary" class="bb-button-bar__button">Button</button>
</div>
<!-- Centered -->
<div class="bb-button-bar bb-button-bar--center">
<button bbButton class="bb-button-bar__button">Button</button>
<button bbButton color="tertiary" class="bb-button-bar__button">Button</button>
</div>
|
Class |
Description |
|---|---|
|
bb-button-bar |
Base class for horizontal button layout. |
|
bb-button-bar--reverse |
Reverses the display order and alignment. |
|
bb-button-bar--center |
Centers the button group horizontally. |
|
bb-button-bar--density-lg |
Adds more spacing between buttons in the bar. |
|
bb-button-bar__button |
Applied to button elements within a bb-button-bar. |