Unstyled Button

A functional button component that has no associated CSS other than focus styles.

UsagePermalink to: Usage

Sometimes a need for a button that has no design might arise, ie. a custom designed icon button. For that purpose there is the Unstyled Button, which has the benefit of adding all native keyboard interactions and the required focus styling. This should be seen as a replacement for clickable <div>/<span> elements. Use this component very, very sparingly.

AccessibilityPermalink to: Accessibility

Since the Unstyled Button depends on the use of aria-label, it's crucial to ensure that the visible label matches the accessible name generated from the aria-label. For example, if the visible label reads "Submit," the accessible name (provided through the accessibleName prop) should also begin with the word "Submit." Ideally, the visible label and the accessible name should be identical whenever possible.

ExamplesPermalink to: Examples

Clickable avatarPermalink to: Clickable avatar

In the following example the Unstyled Button is used to create a clickable avatar.

HB

Open

Copy to clipboard

import { UnstyledButton } from "@peakon/bedrock/react/button";
        
<UnstyledButton
  accessibleName="Harriet Banks"
  className="avatar"
>
  <image src="avatar.png" alt="Harriet Banks" />
</UnstyledButton>

<UnstyledButton
  accessibleName="Harriet Banks"
  className="avatar"
>
  <span className="initials" aria-hidden="true">HB</span>
</UnstyledButton>

With tooltipPermalink to: With tooltip

Enable the tooltip with the withTooltip prop. Uses the accessibleName for the label.

import { UnstyledButton } from "@peakon/bedrock/react/button";

<UnstyledButton
  accessibleName="Harriet Banks"
  className="avatar"
  withTooltip
>
  <span className="initials" aria-hidden="true">HB</span>
</UnstyledButton>

Inner Keyboard focusPermalink to: Inner Keyboard focus

It is possible to add the keyboard focus indicator to the inner boundaries of the button.

import { UnstyledButton } from "@peakon/bedrock/react/button";
        
<UnstyledButton
  accessibleName="Submit data for approval"
  insetFocus
  className={styles.innerFocus}
  >
  Submit data for approval
</UnstyledButton>

Props TablePermalink to: Props Table

Props extend from the HTML button element(external link).