@terminus/ui-icon-button

Icon Button

Table of Contents

• Installation
  • CSS imports
• Usage
  • Theme
  • Accessibility

Installation

Use the ng add command to quickly install all the needed dependencies:

ng add @terminus/ui-icon-button

CSS imports

In your top-level stylesheet, add these imports:

@import '~@terminus/design-tokens/css/library-design-tokens.css';
@import '~@terminus/ui-styles/terminus-ui.css';

Usage

Pass a valid FontAwesome icon reference:

import { faHome } from '@fortawesome/pro-solid-svg-icons/faHome';
...
public home = faHome;

<ts-icon-button
  [icon]="home"
  (clicked)="myMethod()"
></ts-icon-button>

Theme

Use the theme parameter to change the color.

<!-- Will be colored with the 'primary' color -->
<ts-icon-button theme="primary">forum</ts-icon-button>

<!-- Will be colored with the 'accent' color -->
<ts-icon-button theme="accent">forum</ts-icon-button>

<!-- Will be colored with the 'warn' color -->
<ts-icon-button theme="warn">forum</ts-icon-button>

By default the icon will use the library base text color.

Accessibility

For accessibility purposes we should set the actionName and buttonType.

1. actionName can be one of the TsButtonActionTypes and will be used for the aria-label.
2. buttonType can be one of the TsButtonFunctionTypes and will be used for the type attribute.

<ts-icon-button
  actionName="Menu"
  buttonType="button"
  (clicked)="myMethod()"
>bookmark</ts-icon-button>