Button

Primary action control — dark "ink" primary, bordered secondary, quiet ghost, and a red-tinted critical variant for destructive actions.

Selector: tip-button

API

Name	Type	Default	Description
`variant` (input)	`ButtonVariant` = `'primary' \| 'secondary' \| 'ghost' \| 'critical'`	`'primary'`	Visual weight. `critical` is an addition beyond the design import, for destructive actions (e.g. Settings "Reset").
`size` (input)	`Size` = `'sm' \| 'md' \| 'lg'`	`'md'`	Height/padding/font-size preset.
`shape` (input)	`'rounded' \| 'pill'`	`'rounded'`	Corner treatment; `pill` used by the hero "Generate" button.
`full` (input)	`boolean`	`false`	Stretches to 100% width of the host.
`disabled` (input)	`boolean`	`false`	Disables the native button and suppresses `clicked`.
`clicked` (output)	`void`	—	Emitted on click when not disabled.
`[icon]` (slot)	content	—	Leading icon; falls back to empty (hidden) if unused.
`[iconRight]` (slot)	content	—	Trailing icon slot.
default slot	content	—	Button label.

Usage

<tip-button variant="primary" size="sm" (clicked)="openResetModal()">
  <tip-icon icon name="plus" [size]="16" color="var(--tip-white)" />
  Add New Order
</tip-button>

Notes

Press feedback: scale(0.97) on :active, brightness(1.06) on :hover (both skipped when disabled); 0.12s ease transitions throughout.
critical uses a white background with red border/text (--status-critical-fg, --tip-red-100) — distinct from secondary's neutral outline.
Empty icon slots collapse via .tip-btn__icon:empty { display: none } — no need to conditionally omit the slot from the template.