Skip to main content

Link

Overview​

The Link component renders a styled anchor (<a>) element with Bulma helper class integration. Use it for navigation links, external links, or any clickable text that follows Bulma's styling conventions. It supports all Bulma helper props for color, spacing, typography, and more.

info

The Link component is a thin wrapper around the HTML <a> element, providing consistent Bulma styling and helper class support.

Import​

import { Link } from '@allxsmith/bestax-bulma';

Props​

PropTypeDefaultDescription
hrefstring—The URL the link points to.
target'_self' | '_blank' | '_parent' | '_top'—Where to open the linked document.
relstring—Relationship between current and linked document.
isActiveboolean—Whether the link appears active.
classNamestring—Additional CSS classes.
textColor'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger' | 'black' | 'black-bis' | 'black-ter' | 'grey-darker' | 'grey-dark' | 'grey' | 'grey-light' | 'grey-lighter' | 'white' | 'light' | 'dark' | 'inherit' | 'current'—Text color helper.
bgColor'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger' | 'black' | 'black-bis' | 'black-ter' | 'grey-darker' | 'grey-dark' | 'grey' | 'grey-light' | 'grey-lighter' | 'white' | 'light' | 'dark' | 'inherit' | 'current'—Background color helper.
childrenReact.ReactNode—Content to render inside the link.
...All standard <a> and Bulma helper props(See Helper Props)

Usage​

The default usage of the Link component renders a standard anchor element with Bulma styling support.

<Link href="#">Default Link</Link>

Set the text color using the textColor prop to emphasize the link with Bulma's primary color.

<Link href="#" textColor="primary">
  Primary Link
</Link>

Use textColor="danger" for links that indicate destructive or warning actions.

<Link href="#" textColor="danger">
  Danger Link
</Link>

Apply the isActive prop to style the link as currently active, useful for navigation menus.

<Link href="#" isActive>
  Active Link
</Link>

For external links, set target="_blank" and use rel="noopener noreferrer" for security.

<Link href="https://bulma.io" target="_blank" rel="noopener noreferrer">
  Open Bulma Docs
</Link>
Use Button with as="a" for Button-Styled Links

If you need a link that looks like a button, use the Button component with as="a" and a valid href. This ensures proper semantics — the element is still a navigational link, but styled as a button.

Don't Use Button-Styled Links for Actions

A <Button as="a"> should still navigate to a URL. If the element triggers an action (no href), use a regular Button or LinkButton instead. Per Section 508 and eslint-plugin-jsx-a11y, anchor elements must have a valid destination — not just an onClick handler.

<Button as="a" href="#" color="primary">
  Button Link
</Button>

Large Text Link​

Use the textSize prop to increase the link's font size.

<Link href="#" textSize="3">
  Large Link
</Link>

Apply bold text weight using the textWeight prop.

<Link href="#" textWeight="bold">
  Bold Link
</Link>

All Colors​

Display links in all Bulma theme colors.

<Block display="flex" flexDirection="column" gap="2">
  <Link href="#" textColor="primary">
    Primary Link
  </Link>
  <Link href="#" textColor="link">
    Link Color Link
  </Link>
  <Link href="#" textColor="info">
    Info Link
  </Link>
  <Link href="#" textColor="success">
    Success Link
  </Link>
  <Link href="#" textColor="warning">
    Warning Link
  </Link>
  <Link href="#" textColor="danger">
    Danger Link
  </Link>
</Block>

Links work seamlessly inline within text content.

<Paragraph>
  This is a paragraph with an <Link href="#">inline link</Link> in the middle of
  the text.
</Paragraph>

Accessibility​

  • Descriptive Text: Use meaningful link text that describes the destination, not generic text like "click here".
  • External Links: When opening links in new tabs, consider informing users (e.g., with an icon or text like "opens in new tab").
  • Focus States: Links inherit browser focus styles. Customize with CSS if needed.
  • Keyboard Navigation: Links are naturally keyboard accessible via Tab and Enter keys.
info

For navigation menus, consider using the isActive prop to indicate the current page.

Links Are for Navigation, Buttons Are for Actions

Per Section 508 and eslint-plugin-jsx-a11y best practices, links (<a>) should navigate to a URL — not trigger an action via onClick alone. If your element performs an action (opening a modal, submitting data, toggling state, etc.) without navigating, use a Button or LinkButton instead. A <Link href="#" onClick={handleClick}> is an anti-pattern that confuses screen readers and fails accessibility audits.

  • Button: For button-style clickable elements.
  • Paragraph: For text paragraphs that may contain links.
  • Helper Props: Bulma helper props for spacing, color, etc.

Additional Resources​