Anchor Component

The Anchor component renders inline text links with automatic styling and theming support. It wraps the Button component with text styling, providing a consistent link appearance throughout your application.

Usage

Basic Link

Visit the

Example Site for more information.

<Text>
  Visit the <Anchor href="https://example.com" alias="Example Site" /> for more information.
</Text>

Link Opening in New Tab

Check out

our documentation to learn more.

<Anchor
  href="https://docs.example.com"
  alias="our documentation"
  target="_blank"
/>

Using Target as Display Text

When no alias is provided, the target value is used as the display text.

Opens in

_blank

<Anchor href="https://example.com" target="_blank" />

Multiple Links in Text

Learn more about

SolidJS and

StyleX in our guides.

<Text>
  Learn more about{" "}
  <Anchor href="https://solidjs.com" alias="SolidJS" target="_blank" /> and{" "}
  <Anchor href="https://stylexjs.com" alias="StyleX" target="_blank" /> in our guides.
</Text>

Props

Name	Type	Default	Description
`href`	`string`		The URL the anchor links to (required)
`alias`	`string`	undefined	Display text for the link. If not provided, falls back to target prop value
`target`	`string`	undefined	Where to open the linked URL (e.g., '_blank' for new tab). Also used as fallback display text if alias is not provided

Styling

The Anchor component renders as an underlined text link that inherits color theming from the nearest ContainerContext. It uses the Button component internally with type="text" styling, which means it has:

Transparent background

No border

Text underline decoration

Hover and active color states

Automatic color adaptation based on container context

SmartString Integration

The Anchor component can be used within SmartStrings via the reef/anchor tag. When the Text component encounters this tag, it renders an Anchor component automatically.

See

docs for details.

<Text>
  {[
    "See ",
    { _tag: "reef/anchor", href: "https://example.com", alias: "docs" },
    " for details.",
  ]}
</Text>

Accessibility

The Anchor component renders as a native <a> element, ensuring proper keyboard navigation and screen reader support. When using target="_blank", consider adding appropriate context in the alias text to indicate the link opens in a new tab.