Forms

Link

Anchor styling with default/muted variants and a disabled state.

fandry-link

Example

Link to section Example

Custom colors and parts

Link to section Custom colors and parts

The same component with a few --fd-* tokens set around it and its parts restyled. The code is under Parts below.

Props

Link to section Props

Prop	Type	Default	Description
`href`	`string`	`''`	Link target.
`target`	`'_self' \| '_blank' \| '_parent' \| '_top'`	`'_self'`	Native anchor target.
`variant`	`'default' \| 'muted'`	`'default'`	Visual style.
`disabled`	`boolean`	`false`	Renders with no href, removing it from tab order.
`element-props`	`Record<string, unknown>`	`{}`	Spread onto the native `<a>` (e.g. `{ title: 'Docs' }`). `{ ariaCurrent: 'page' }` marks a nav's current page for assistive tech and adds the `current` state.

Parts

Link to section Parts

Style the elements inside the component from your own CSS with ::part(). Every fandry component renders in native shadow DOM, so parts work on LWR and Salesforce alike. For colors, spacing, radius and type across many components, set the --fd-* tokens instead. The code for the "Custom colors and parts" example above:

Part	Description
`base`	The outermost element.
`link`	The native `<a>`.

States are extra names on a part while the state is on. Name both to style one state, e.g.fandry-checkbox::part(control checked).

State	Description
`default`	The default look (`variant="default"`).
`muted`	`variant="muted"`.
`disabled`	A control, option or item that cannot be used.
`current`	The link to the page being viewed.

<!-- template -->
<div class="brand" onclick={handleNoopClick}>
  <fandry-text>
    Not the right size? See <fandry-link href="#">shipping and returns</fandry-link>.
  </fandry-text>
</div>

/* css */
fandry-link::part(link) {
  color: hsl(160 84% 26%);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 2px solid hsl(160 84% 26% / 0.3);
}

fandry-link::part(link):hover {
  border-bottom-color: currentColor;
}

Code

Link to section Code

<fandry-link href="https://github.com/rahulgawale/fandryui" target="_blank">GitHub</fandry-link>