Base Button

This clickable bar is made with BaseButton

() => alert("click")

import * as React from "react";
import { BaseButton } from "spaceweb/base-button";

export default () => {
  return (
    <BaseButton
      className="border-t border-r border-b border-l border-solid spr-border-02 spr-shadow-01 h-10 w-full flex justify-center items-center text-13 leading-4.5 font-400"
      $as="section"
      aria-label="Click this bar to test base button"
      onClick={() => alert("click")}
    >
      This clickable bar is made with BaseButton
    </BaseButton>
  );
}

BaseButton is a building block to construct any clickable component with support for inbuilt a11y. It resets native styles provided to a button and takes care of keyboard modality.

When to use

• To make any clickable component which doesn't follow already provided Button.
• To make clickable areas or overlays on your components.
• Need anchor functionality on custom component which isn't a button such as img with an href.

Accessibility

• By default, BaseButton renders as a button.
• BaseButton maintains accessibility upon overriding the component. No need of adding tabIndex or onKeyPress separately.
• Add aria-label compulsorily for screen readers.

Examples

Clickable Media Card

Click this card

JS

TS

Clickable Image with href

JS

TS

Play Card with Clickable Area

Master of Puppets

Metallica

JS

TS

BaseButton props

You can check the implementation of the component for more details.

BaseButton exports

You can import this module like so:

import {BaseButton} from 'spaceweb/base-button'

It exports the following components or utility functions:

• BaseButton
• StyledBaseButton
• buttonResetStyles