Migrating from tgButton2

Replace the tgButton2 attribute with tg2Button, and import Tg2ButtonComponent instead of TgButton2Component.

Selector

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

<!-- After -->
<button tg2Button>Button</button>

Variant

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

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

<!-- After -->
<button tg2Button tg2Style="transparent">Button</button>

Size

The [compact] boolean is replaced by a size input. Note: [autoCompact] has no equivalent — use size="compact" instead.

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

<!-- After -->
<button tg2Button size="compact">Button</button>

Shape

The shape input replaces the old pattern of combining [transparent] and [tag] to achieve pill styling. In tgButton2, the o-transparent-button2.o-tag-button2 combination applied a border-radius — there was no standalone rounded modifier.

<!-- Before: transparent + tag was the only way to get pill styling -->
<button tgButton2 [transparent]="true" [tag]="true">Button</button>

<!-- After -->
<button tg2Button shape="round">Button</button>

Icon only

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

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

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

Removed inputs

These tgButton2 inputs have no direct equivalent in tg2Button:

• [autoCompact] — closest equivalent is size="compact"