Button Beta
import { Tg2ButtonComponent } from '@trademe/tangram';
The next-generation button directive. Applies to <button><a>tg2Button
Styles
All our different variants of buttons are set by adding the tg2Style
States
Default size · square shape. Each variant has a distinct disabled treatment.
| Resting | Hover | Focus | Active | Disabled | Loading | |
|---|---|---|---|---|---|---|
| Primary - default | ||||||
| Secondary | ||||||
| Transparent | ||||||
| Destructive | ||||||
| Expressive | ||||||
| Enhanced |
Sizes
| Primary | Secondary | Destructive | Expressive | |
|---|---|---|---|---|
| Small (32px) | ||||
| Compact (35px) | ||||
| Default (48px) |
Shapes
Icons
| Primary | Secondary | Expressive | Destructive | |
|---|---|---|---|---|
| Leading | ||||
| Trailing |
Icon only
Links
Apply tg2Button<a><button>
| Primary | Secondary | Transparent |
|---|---|---|
| Button | Button | Button |