Anchor

Display links with Hope UI styling features.

Import

tsx
import { Anchor } from "@hope-ui/core";

tsx
import { Anchor } from "@hope-ui/core";

Usage

tsx
<Anchor href="/">Hope UI</Anchor>

tsx
<Anchor href="/">Hope UI</Anchor>

External link

Use the isExternal prop to open the link in a new tab.

tsx
<Anchor href="https://hope-ui.com" isExternal>
  Hope UI <ExternalLinkIcon />
</Anchor>

tsx
<Anchor href="https://hope-ui.com" isExternal>
  Hope UI <ExternalLinkIcon />
</Anchor>

Usage with routing library

Pass the as prop to Anchor to replace the rendered a tag with the router's link component.

tsx
import { Link } from "@solidjs/router";
<Anchor as={Link} href="/">
  Home
</Anchor>;

tsx
import { Link } from "@solidjs/router";
<Anchor as={Link} href="/">
  Home
</Anchor>;

Theming

Use the AnchorTheme type to override Anchor styles and default props when extending Hope UI theme.

tsx
import { extendTheme, AnchorTheme } from "@hope-ui/core";
const theme = extendTheme({
  components: {
    Anchor: {
      // ...overrides
    } as AnchorTheme,
  },
});

tsx
import { extendTheme, AnchorTheme } from "@hope-ui/core";
const theme = extendTheme({
  components: {
    Anchor: {
      // ...overrides
    } as AnchorTheme,
  },
});

Component parts

Props