Button
Table of Contents
Installation
Use the ng add command to quickly install all the needed dependencies:
ng add @terminus/ui-buttonCSS 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';CSS resources
Load the needed font families by adding this link to the <head> of your application:
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,400&display=swap" rel="stylesheet">
<!-- Don't forget to update the integrity SHA -->
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.15.1/css/solid.css" integrity="SHA-HERE" crossorigin="anonymous">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.15.1/css/fontawesome.css" integrity="SHA-HERE" crossorigin="anonymous">Usage
<ts-button (clicked)="myFunc($event)">Click me!</ts-button>Text content
Text content can be passed in through the element, or through an @Input:
<ts-button>Click me!</ts-button>
<ts-button textContent="Click Me!"></ts-button>Theme
Set any available theme type:
<ts-button theme="secondary">Click Me!</ts-button>See TsButtonThemeTypes for all available themes.
Size
For a smaller button, set the isSmall flag:
<ts-button [isSmall]="true">Click Me!</ts-button>Button type
Set any available type:
<ts-button buttonType="submit">Click Me!</ts-button>See TsButtonFunctionTypes for all available button types.
Action name
Any valid action name can be set:
<ts-button actionName="Reset">Click Me!</ts-button>See TsButtonActionTypes for all available action names.
Show progress
When 'showing progress', the button will be disabled, and a spinner will be shown:
<ts-button [showProgress]="true">Click Me!</ts-button>