Migrating from tgButton2 (tg-light)

Replace the tgButton2 attribute with tg2Button, add [theme]="'tg-light'", and import Tg2ButtonComponent instead of TgButton2Component.

Selector

Before

After

<!-- Before -->
<button tgButton2>Button</button>

<!-- After -->
<button tg2Button [theme]="'tg-light'" tg2Style="secondary">Button</button>

Variant

The separate inputs ([transparent], [tgStyle]) are replaced by a single tg2Style input. Primary is the default and can be omitted.

Before

After

<!-- Before -->
<button tgButton2 [transparent]="true">Button</button>

<!-- After -->
<button tg2Button tg2Style="transparent" [theme]="'tg-light'">Button</button>

Watchlist

tgButton2 had no first-class watchlist style — production listings pages hand-roll it with a page-scoped CSS override (see tm-listing-watchlist__button on any live listing's watchlist button) rather than a shared, documented class. tg2Style="watchlist" is now a fully supported variant with hover, active, disabled and toggled states, plus a pop animation when toggled on. Under tg-light/tg-dark it uses the hokey-pokey palette, matching the old override's colours almost exactly. See the Watchlist page for the full API.

Before

After

<!-- Before (no first-class style — production hand-rolls it per-page, -->
<!-- e.g. tm-listing-watchlist__button on trademe.co.nz listing pages) -->
<button tgButton2 class="tm-listing-watchlist__button">
    <tg-icon-left role="presentation" name="binoculars-plus"></tg-icon-left>
    Add to Watchlist
</button>

<!-- After -->
<button
    tg2Button
    tg2Style="watchlist"
    [theme]="'tg-light'"
    [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>

Size

The [compact] boolean is replaced by a size input.

Before

After

<!-- Before -->
<button tgButton2 [compact]="true">Button</button>

<!-- After -->
<button tg2Button size="small" [theme]="'tg-light'" tg2Style="secondary">Button</button>

Auto size

The [autoCompact] boolean is replaced by the autoSize input, which shrinks the button to the specified size on narrow viewports (≤ sm breakpoint). Use autoSize="small" to match the old behaviour.

Before

After

<!-- Before -->
<button tgButton2 [autoCompact]="true">Button</button>

<!-- After -->
<button tg2Button autoSize="small" [theme]="'tg-light'" tg2Style="secondary">Button</button>

Tag

The [tag] input is preserved in the tg-light theme. Add [theme]="'tg-light'" alongside it.

Before

After

<!-- Before -->
<button tgButton2 transparent
    tag>Button</button>

<!-- After -->
<button tg2Button [theme]="'tg-light'" [tag]="true">Button</button>

Link style

The [linkStyle] input is preserved in the tg-light theme. Add [theme]="'tg-light'" alongside it.

Before

After

<!-- Before -->
<button tgButton2 [linkStyle]="true">Button</button>

<!-- After -->
<button tg2Button [theme]="'tg-light'" [linkStyle]="true">Button</button>

Icon only

Icon-only detection is no longer automatic. Add [iconOnly]="true" explicitly when the button contains only an icon.

Before

After

<!-- Before (icon-only detected automatically) -->
<button tgButton2 aria-label="heart">
    <tg-icon name="heart"></tg-icon>
</button>

<!-- After -->
<button tg2Button [theme]="'tg-light'" [iconOnly]="true" aria-label="heart" tg2Style="secondary">
    <tg-icon-left name="heart"></tg-icon-left>
</button>

Spacing

tgButton2 baked in a bottom margin for stacking (larger again on [compact]). tg2Button applies no margin of its own — add a margin-bottom if you need spacing between buttons.

size="large" (default): margin-bottom: $tg-spacing-compact;
size="medium": margin-bottom: $tg-unit;
size="small": margin-bottom: $tg-unit;

<!-- Before (tgButton2 applied its own margin-bottom for stacking) -->
<button tgButton2>Button one</button>
<button tgButton2>Button two</button>

<!-- After (tg2Button applies no margin — add it explicitly) -->
<button tg2Button [theme]="'tg-light'" class="my-button-spacing">Button one</button>
<button tg2Button [theme]="'tg-light'" class="my-button-spacing">Button two</button>

// my-button-spacing.scss
.my-button-spacing {
    margin-bottom: $tg-spacing-compact; // large (default) — use $tg-unit for medium/small
}