LinkButton

Overview

The LinkButton component renders a <button> that visually looks like text or a link.

It provides an accessible replacement for <div onClick> anti-patterns by wrapping the Button component with is-text or is-ghost styling and CSS overrides.

Two variants:

• text — like Bulma's is-text button but without the underline. Hover shows a background highlight.
• ghost — like Bulma's is-ghost button but without the link color. Hover shows an underline.

Both variants support an optional color prop to set the text color.

tip

Use LinkButton instead of <div onClick> or unstyled click handlers to get proper keyboard navigation, focus handling, and screen reader support for free.

---

Import

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

---

Usage

Default (Text Variant)

The default variant renders a minimal text button without underline. On hover it shows a background highlight.

<LinkButton>Click me</LinkButton>

Ghost Variant

The ghost variant renders a link-like button with default text color (not link color). On hover it shows an underline.

<LinkButton variant="ghost">Ghost LinkButton</LinkButton>

Text Variant with Color

Add a color prop to set the text color. The hover behavior remains the same.

<LinkButton color="primary">Primary Text</LinkButton>

Ghost Variant with Color

Colors work with the ghost variant too.

<LinkButton variant="ghost" color="danger">
  Danger Ghost
</LinkButton>

All Colors

<Buttons>
  {['primary', 'link', 'info', 'success', 'warning', 'danger'].map(color => (
    <LinkButton key={color} color={color}>
      {color.charAt(0).toUpperCase() + color.slice(1)}
    </LinkButton>
  ))}
</Buttons>

Disabled

<LinkButton isDisabled disabled>
  Disabled LinkButton
</LinkButton>

All Sizes

<Buttons>
  {['small', 'normal', 'medium', 'large'].map(size => (
    <LinkButton key={size} size={size}>
      {size.charAt(0).toUpperCase() + size.slice(1)}
    </LinkButton>
  ))}
</Buttons>

Polymorphic as (Router Links)

Since LinkButton forwards its props to Button, it inherits the same polymorphic as prop — render it as a router's Link component to get a link-styled, a11y-friendly, client-side-navigating call to action.

import { Link as RouterLink } from 'react-router-dom';
import { LinkButton } from '@allxsmith/bestax-bulma';

<LinkButton as={RouterLink} to="/dashboard" variant="underline">
  Go to Dashboard
</LinkButton>;

---

Visual Behavior

	Default text color	Hover
text variant	var(--bulma-text)	Background highlight, no underline
ghost variant	var(--bulma-text)	Underline appears
+ color	Uses specified color	Same hover behavior, color maintained

---

Accessibility

• Semantic HTML: Renders a native <button> element, providing correct keyboard navigation, focus management, and screen reader announcements.
• States: The isDisabled and disabled props ensure correct aria-disabled and disabled attributes.
• Keyboard: Fully keyboard accessible with Enter and Space activation.
• Replaces anti-patterns: Use this instead of <div onClick> or <span onClick> for interactive elements that should not navigate.

note

If your LinkButton has only an icon, use aria-label to provide accessible text.

---

Related Components

• Button: Full-featured button with all Bulma styles.
• Buttons: Group multiple buttons together.
• Helper Props: List of all supported Bulma helper props.

---

Additional Resources

• Bulma Button Documentation
• React Button Accessibility
• Storybook: LinkButton Stories

---

Props

Prop	Type	Default	Description
variant	'text' | 'ghost' | 'underline'	'text'	Display mode. text has no underline; ghost uses default text color. Display mode. 'text' renders a minimal button without underline; 'ghost' renders a link-like button with default text color; 'underline' renders a text button that underlines on hover/focus. Defaults to 'text'.
color	'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger' | 'white' | 'light' | 'dark' | 'black'	—	Text color override for the button.
size	'small' | 'normal' | 'medium' | 'large'	—	Size of the button.
isRounded	boolean	false	Makes the button rounded. Button is fully rounded.
isLoading	boolean	false	Displays a loading spinner. Button shows a loading spinner.
isStatic	boolean	false	Makes the button non-interactive. Button is static and non-interactive.
isFullWidth	boolean	false	Makes the button full-width. Button takes the full width of parent.
isFocused	boolean	false	Applies focused styling (visual only). Button is styled as focused.
isActive	boolean	false	Applies active styling (visual only). Button is styled as active.
isHovered	boolean	false	Applies hovered styling (visual only). Button is styled as hovered.
isDisabled	boolean	false	Applies disabled styling. Button is disabled.
className	string	—	Custom class name. Additional CSS classes to apply.
textColor	Bulma color | 'inherit' | 'current'	—	Text color helper.
bgColor	Bulma color | 'inherit' | 'current'	—	Background color helper.
as	React.ElementType	'button'	Render as a <button>, <a>, or a custom component (e.g. a router Link). Defaults to 'button'; anything else (including 'a') uses anchor-style prop handling.
href	string	—	Href value (if rendering as <a>). Specifies the URL for anchor buttons.
onClick	React.MouseEventHandler<HTMLButtonElement> | React.MouseEventHandler<HTMLAnchorElement>	—	Click event handler. Click handler for the button or anchor.
target	string	—	Anchor tag target. Target for anchor element.
rel	string	—	Anchor tag rel. Rel attribute for anchor element.
children	React.ReactNode	—	Content to be rendered inside the button.
...	All standard <button> attributes and Bulma helper props	—	See Helper Props

note

The isOutlined, isInverted, and isLight props from Button are not available on LinkButton — they don't apply to link-like buttons.