Create Reusable Button Component with Custom Styles in Angular

Creating a reusable button component with custom styles in Angular involves defining a component that accepts inputs for customization and emits outputs for interactions.

So you can tell the given instance of the button what function to call. So, this reusable button component will ensure formatting is consistent throughout the app.

First create Angular application by executing the following command:

ng new angular-reusable-button-component --no-standalone

Then generate a component for button using the following command:

ng generate component button

Once you have successfully created the Angular application and generated the button component you can write the following code in the file src/app/button/button.component.ts:

import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-button',
  templateUrl: './button.component.html',
  styleUrl: './button.component.css'
})
export class ButtonComponent {

  @Input() label: string = 'Button';
  @Input() buttonType: 'primary' | 'secondary' | 'danger' | 'success' = 'primary';
  @Input() disabled: boolean = false;
  @Input() customClass: string = '';

  @Output() onClick = new EventEmitter<MouseEvent>();

  onClickButton(event: MouseEvent): void {
    this.onClick.emit(event);
  }

}

The above classes includes @Input and @Output decorators for custom button to make it a reusable button with custom styles.

@Input decorator label will display the text for the button.

@Input decorator buttonType will specify what type of the button is – primary, secondary, danger, success, etc. The default type of the button is primary. The button’s look and feel will depend on the type of the button and corresponding style applicable to the type.

@Input decorator disabled will determine whether the button is disabled or enabled to be clicked upon. By default the button will be enabled.

@Input decorator customClass will be used to specify the class for the button so that you can apply specific unique style to a particular button.

@Output() decorator onClick will be used to emit an event when a button is clicked.

Write the following code to the file src/app/button/button.component.html:

<button
  [ngClass]="[buttonType, customClass]"
  [disabled]="disabled"
  (click)="onClickButton($event)"
>
  {{ label }}
  <ng-content></ng-content>
</button>

The button tag is configured with buttonType, customeClass, whether disabled or not and what will happen when on click event.

The {{ label }} will be replaced by actual value for the button’s label text.

The @Output decorator to click instead of onClick, and using the MouseEvent type instead of any. These changes will allow the button component to behave syntactically more like a native button when it’s consumed.

The custom styles for the button are written in the file src/app/button/button.component.css:

button {
  padding: 9px 17px;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  font-size: 16px;
  transition: background-color 0.3s ease;
}

.primary {
  background-color: #007bff;
  color: white;
}





.primary:hover {
  background-color: #0056b3;
}

.secondary {
  background-color: #6c757d;
  color: white;
}

.secondary:hover {
  background-color: #5a6268;
}

.danger {
  background-color: #dc3545;
  color: white;
}

.danger:hover {
  background-color: #bd2130;
}

.success {
  background-color: #28a745;
  color: white;
}





.success:hover {
  background-color: #1e7e34;
}

button:disabled {
  background-color: #cccccc;
  cursor: not-allowed;
}

.special-button {
  background-color: #ab5162;
  color: white;
}

.primary:hover {
  background-color: #1205w3;
}

Now you can use the template in parent component. Edit the file src/app/app.component.html and write the following code:

<app-button label="Submit"></app-button>

<app-button label="Delete" buttonType="danger" (onClick)="onDelete($event)">
  <i class="fas fa-trash"></i>
</app-button>

<app-button label="Disabled" buttonType="secondary" [disabled]="true"></app-button>

<app-button label="Special" customClass="special-button"></app-button>

The first button is primary type button as I have not specified any type, so it took the default value for the button type.

The second button indicates for the deletion and can be used to delete something. You can use the icon also instead of text if you are using font awesome package. I have also called onDelete() function when the button is clicked.

The third button is disabled and you won’t be able to click it.

The fourth button is a special button with custom style class.

You need to write the onDelete() method in the parent component’s class file src/app/app.component.ts:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {
  
  onDelete(event: MouseEvent) {
	console.log('onDelete: ', event);
  }
  
}

Once you run the application by using command ng serve your page will display the following buttons:

If you click on the Delete button you will see the following log in the console:

You can download the source code.