Link

<div class="column">  <tx-link link="docs.example.com" />  <tx-link link="https://example.com/pricing" linkText="See pricing" /></div>

<div class="column">  <tx-link link="support@example.com" type="email" />  <tx-link link="+380 44 123 45 67" type="phone" /></div>

<div class="column">  <tx-link    link="docs.example.com/getting-started"    [copyable]="true"    (copied)="toast.success('Copied ' + $event)"  />  <tx-link    link="billing@example.com"    type="email"    [copyable]="true"    (copied)="toast.success('Copied ' + $event)"  /></div>

<div class="column">  <tx-link [link]="long" [maxLength]="40" />  <div class="narrow"><tx-link [link]="long" /></div></div>

<tx-icon-field>  <tx-input-icon icon="search" />  <input    txInput    aria-label="Search links"    placeholder="Search"    [value]="search()"    (input)="search.set($any($event.target).value)"  />  <tx-input-clear /></tx-icon-field><ul class="list">  @for (link of links; track link) {    <li><tx-link [link]="link" [highlight]="search()" /></li>  }</ul>

<p class="text">  Read about <tx-link link="buttons" [routerLink]="['/components', 'button']" /> and  <tx-link link="avatars" routerLink="/components/avatar" />.</p>

<nav class="nav" aria-label="Account">  <tx-icon-link icon="th-large" text="Link" routerLink="/components/link" />  <tx-icon-link icon="user" text="Avatar" routerLink="/components/avatar" />  <tx-icon-link icon="book" text="Guide" href="https://example.com/guide" />  <tx-icon-link icon="sign-out" text="Log out" (click)="toast.info('Signed out')" /></nav>

<tx-link  link="status.example.com"  [copyable]="true"  [dt]="{    root: {      color: 'var(--tx-text-primary)',      hoverColor: 'var(--tx-primary-soft-text)',      underlineOffset: '4px',    },  }"/>