Button overview

Overview
API
Theme
Examples

NbButtonComponent

Basic button component.

Default button size is medium and status color is basic:

Button Showcase
<button nbButton></button>

Installation

Import NbButtonModule to your feature module.

@NgModule({
  imports: [
    // ...
    NbButtonModule,
  ],
})
export class PageModule { }

Usage

Buttons are available in multiple colors using status property:

Button Colors

There are three button sizes:

Button Sizes

And two additional style types - outline:

Outline Buttons

and hero:

Button Hero

Buttons available in different shapes, which could be combined with the other properties:

Button Shapes

nbButton could be applied to the following selectors - button, input[type="button"], input[type="submit"] and a:

Button Elements

Button can be made fullWidth:

Full Width Button

Icon can be placed inside of a button as a child element:

Icon Button
Input
Previous page
Button Group
Next page

Need some help or found an issue?

Ask on Stack Overflow with tag `nebular` or post an issue on GitHub.