Button watchlist

tg2Style="watchlist" is a variant for "add to watchlist" style toggle actions — e.g. Watchlist this property, Get updates. It's always paired with [toggled] so aria-pressed reflects the current state, and the binoculars-plus / binoculars-tick icon pair. Its colour depends on [theme] — see the main Themes page for a side-by-side comparison across all four themes.

Live example

Click either button to see the toggle, icon swap and pop animation in action — both represent the same watchlisted item, so they update together.

Code example

<button
    tg2Button
    tg2Style="watchlist"
    [toggled]="isWatchlisted()"
    (click)="isWatchlisted.set(!isWatchlisted())">
    <tg-icon-left
        [name]="isWatchlisted() ? 'binoculars-tick' : 'binoculars-plus'"
        size="small"
        aria-hidden="true"></tg-icon-left>
    {{ isWatchlisted() ? 'Watchlisted' : 'Add to Watchlist' }}
</button>

States

Watchlist's resting, hover, focus, active, disabled and loading states are shown alongside every other variant on the main Button states table. The one state unique to Watchlist is toggled:

[toggled]="false"

[toggled]="true"

Sizes & icon-only

Watchlist sizes
	Labelled	Icon only
Small (32px)
Medium (40px)
Large (48px)

The button locks a minimum width sized to fit "Watchlisted" (the longer label), so toggling between labels doesn't reflow surrounding layout.

API

Watchlist uses the same Tg2ButtonComponent API as every other variant — see the main Button page for the full input reference. One input matters most here:

[toggled] — boolean | null. Drives aria-pressed and the toggled background (see the main Themes page for the exact colour per theme). On a watchlist button, flipping it to true also plays the pop animation automatically — there's no separate input to control it.

Related pattern — corner "dog-ear" watchlist

Not yet available in Tangram. The Shipyard button workbench prototype includes a corner "dog-ear" watchlist button for listing cards — a yellow triangular fold positioned absolute in the top-right corner of a position: relative card, with a fold animation on trigger. This is a distinct pattern from the tg2Style="watchlist" button variant documented above and would need its own component if brought into Tangram.