Button
Triggers an action. Put txButton on a native button or a.
Severity
Eight meanings, from the main action to a destructive one.
11 lines
<div class="flex"> <button txButton>Primary</button> <button txButton [severity]="'secondary'">Secondary</button> <button txButton [severity]="'success'">Success</button> <button txButton [severity]="'info'">Info</button> <button txButton [severity]="'warn'">Warn</button> <button txButton [severity]="'danger'">Danger</button> <button txButton [severity]="'help'">Help</button> <button txButton [severity]="'contrast'">Contrast</button> <button txButton disabled>Disabled</button></div>Label
Text through label or as content. No text + an icon = square.
The last one is square until clicked
13 lines
<div class="flex"> <button txButton [label]="'Save'" [icon]="'check'"></button> <button txButton [icon]="'check'">Save</button> <button txButton [severity]="'secondary'" [icon]="'plus'" [label]="count() || ''" aria-label="Add" (click)="count.update((n) => n + 1)" ></button> <span class="hint">The last one is square until clicked</span></div>Variants
outlined, text and link for quieter actions.
18 lines
<div class="stack"> <div class="flex"> <button txButton [outlined]="true">Primary</button> <button txButton [outlined]="true" [severity]="'secondary'">Secondary</button> <button txButton [outlined]="true" [severity]="'success'">Success</button> <button txButton [outlined]="true" [severity]="'danger'">Danger</button> </div> <div class="flex"> <button txButton [text]="true">Primary</button> <button txButton [text]="true" [severity]="'secondary'">Secondary</button> <button txButton [text]="true" [severity]="'success'">Success</button> <button txButton [text]="true" [severity]="'danger'">Danger</button> </div> <div class="flex"> <button txButton [link]="true">Link button</button> <a txButton [variant]="'link'" href="https://angular.dev" target="_blank">Real link</a> </div></div>Icons
Any side: iconPos left, right, top or bottom.
8 lines
<div class="flex"> <button txButton [icon]="'plus'">Create</button> <button txButton [icon]="'download'" [iconPos]="'right'" [severity]="'secondary'"> Export </button> <button txButton [icon]="'upload'" [iconPos]="'top'" [outlined]="true">Upload</button> <button txButton [icon]="'bell'" [iconPos]="'bottom'" [text]="true">Alerts</button></div>Brands
Brand logos from @tectra-ng/brand-icons.
14 lines
<div class="flex"> <button txButton [icon]="'google'" [severity]="'secondary'" [outlined]="true"> Sign in with Google </button> <button txButton [icon]="'github'" [severity]="'contrast'">GitHub</button> <button txButton [icon]="'telegram'" [severity]="'info'" aria-label="Telegram"></button> <button txButton [icon]="'youtube'" [severity]="'danger'" [rounded]="true" aria-label="YouTube" ></button></div>Icon only
Square by itself when there is no text. Add an aria-label.
21 lines
<div class="flex"> <button txButton [icon]="'pencil'" [size]="'small'" aria-label="Edit"></button> <button txButton [icon]="'trash'" [size]="'small'" [severity]="'danger'" aria-label="Delete" ></button> <button txButton [icon]="'refresh'" [severity]="'secondary'" aria-label="Refresh"></button> <button txButton [icon]="'filter'" [outlined]="true" aria-label="Filters"></button> <button txButton [icon]="'times'" [text]="true" [rounded]="true" [severity]="'secondary'" aria-label="Close" ></button> <button txButton [icon]="'plus'" [rounded]="true" [size]="'large'" aria-label="Add"></button></div>Ripple
Press and hold. Turn on with provideTectra({ ripple: true }).
18 lines
<div class="flex"> <button txButton [size]="'large'">Press and hold</button> <button txButton [outlined]="true" [size]="'large'">Outlined</button> <button txButton [text]="true" [severity]="'secondary'" [size]="'large'">Text</button> <button txButton [icon]="'heart'" [rounded]="true" [rippleCentered]="true" [severity]="'danger'" [size]="'large'" aria-label="Like" ></button> <button txButton [severity]="'contrast'" [rippleColor]="'#a78bfa'" [size]="'large'"> Custom colour </button> <button txButton [ripple]="false" [severity]="'secondary'" [size]="'large'">No ripple</button></div>Loading
Spins, disables and sets aria-busy. Click it.
12 lines
<div class="flex"> <button txButton [icon]="'check'" [loading]="isSaving()" (click)="save()">Save</button> <button txButton [icon]="'refresh'" [severity]="'secondary'" [loading]="isSaving()" (click)="save()" aria-label="Refresh" ></button> <button txButton [outlined]="true" [loading]="isSaving()" (click)="save()">Sync</button></div>Disabled
Works on button and on a.
5 lines
<div class="flex"> <button txButton disabled>Button</button> <button txButton [outlined]="true" [disabled]="true">Outlined</button> <a txButton [link]="true" href="https://angular.dev" [disabled]="true">Disabled link</a></div>Badge
A counter after the text.
7 lines
<div class="flex"> <button txButton [badge]="3">Inbox</button> <button txButton [outlined]="true" [badge]="12" [icon]="'bell'">Alerts</button> <button txButton [severity]="'secondary'" [badge]="2" [badgeSeverity]="'danger'"> Errors </button></div>Rounded raised
Round corners and a shadow.
6 lines
<div class="flex"> <button txButton [rounded]="true">Rounded</button> <button txButton [rounded]="true" [outlined]="true">Rounded outlined</button> <button txButton [raised]="true">Raised</button> <button txButton [raised]="true" [rounded]="true" [severity]="'help'">Both</button></div>Plain
Grey outlined or text buttons for toolbars.
5 lines
<div class="flex"> <button txButton [plain]="true" [text]="true" [icon]="'filter'">Filter</button> <button txButton [plain]="true" [text]="true" [icon]="'download'">Export</button> <button txButton [plain]="true" [outlined]="true" [icon]="'refresh'">Refresh</button></div>Fluid
Full width — one button or everything inside <tx-fluid>.
7 lines
<div class="stack"> <button txButton [fluid]="true">One fluid button</button> <tx-fluid class="footer"> <button txButton [severity]="'secondary'">Cancel</button> <button txButton>Confirm</button> </tx-fluid></div>Sizes
Small, medium, large.
5 lines
<div class="flex"> <button txButton [size]="'small'">Small</button> <button txButton>Medium</button> <button txButton [size]="'large'">Large</button></div>Template
Any markup in place of the icon.
14 lines
<div class="flex"> <button txButton [severity]="'secondary'"> <ng-template txButtonIcon><span>🚀</span></ng-template> Launch </button> <button txButton [outlined]="true"> <ng-template txButtonIcon> <svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor"> <circle cx="12" cy="12" r="6" /> </svg> </ng-template> Custom SVG </button></div>Design tokens
Change tokens of one button with [dt].
4 lines
<div class="flex"> <button txButton [dt]="teal">Teal button</button> <button txButton [dt]="chunky" [icon]="'plus'">Chunky</button></div>Pass through
Your classes and styles on inner parts — static or from the button state.
12 lines
<div class="flex"> <button txButton [icon]="'bell'" [badge]="5" [pt]="decorated">Notifications</button> <button txButton [icon]="'refresh'" [loading]="isSyncing()" [pt]="stateAware" (click)="sync()" > Sync </button></div>Unstyled
No tectra styles, behaviour stays.
4 lines
<div class="flex"> <button txButton [unstyled]="true" [icon]="'check'" class="my-button">My own styles</button> <button txButton [unstyled]="true">Browser default</button></div>