Implementation
Link Props
LinkButton Props
Common Examples
import { Link } from "@servicetitan/anvil2";
function ExampleComponent() {
return (
<Link href="#" appearance="primary" ghost>
Link
</Link>
);
}
Link variations
The Link component is used in place of an HTML a anchor tag to navigate the user to a different page or website.The LinkButton component is used to create an HTML button element that is styled to look like a link. It accepts the same props as the Link component, but extends the HTML button element props rather than HTML a props.React Accessibility
The Link component is designed to have many accessibility features by default. Some considerations remain for the developer:
- The context for a link should be clear from the link text. In extreme cases, an
aria-label should be used to give screen readers additional context.
- The link text should be concise. Only include what is necessary to understand the context. Remember that screen readers use this text to give context.
- Be careful when linking to full URLs. When linking to a URL, consider users with screen readers who need to hear it announced.
For more guidance on link labels and context association, see link accessibility best practices.<Link href="/page" appearance="primary" target="_blank">
Link text
</Link>
Link Props
In addition to the props listed below, the Link component also accepts any valid HTML <a> props, such as href and target.appearance
"primary" | "secondary"
default:"primary"
Whether the link should have a quieter, less prominent appearance.
ghost can only be true when appearance="primary".
<LinkButton
appearance="primary"
onClick={() => console.log("Clicked")}
>
Link button text
</LinkButton>
LinkButton component also accepts any valid HTML <button> props, such as onClick.appearance
"primary" | "secondary"
default:"primary"
Whether the link button should have a quieter, less prominent appearance.
ghost can only be true when appearance="primary".
Last modified on January 23, 2026
