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>

Add a background color and padding to create a button-like appearance.

<Link href="#" bgColor="light" p="2">
  Link with Background
</Link>

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.

<div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
  <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>
</div>

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.

  • 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​