Button

Hello

() => alert("click")

'How are you?'

import * as React from "react";
import { Button } from "spaceweb/button";

export default () => {
  return (
    <Button
      onClick={() => alert("click")}
      tooltipContent="How are you?"
    >
      Hello
    </Button>
  );
}

Buttons provide cues for actions and events. These fundamental components allow users to process actions or navigate an experience.

When to use

When a person:

• submits a form,
• starts a new task / action.

The Button component has 4 different variant variants: primary, secondary, tertiary, and minimal.

Primary buttons are intended to be used as the leading trigger or cue of action. Primary buttons are bold with a dominant color background and white text/icons. These are to be used sparingly as the sole action of a view. Primary buttons can be accompanied by secondary button to balance action hierarchy.

Secondary buttons should be used in combination with a primary button as a way to create action hierarchy. Secondary buttons are subdued in value with the primary color text to compliment the primary buttons.

Tertiary buttons can used as a substitute for a secondary buttons, but should never take the role of a primary button action. As the name implies, it’s offered to supplement to create variation within an experience.

Examples

API

Button props

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

Button exports

You can import this module like so:

import {Button} from 'spaceweb/button'

It exports the following components or utility functions:

• Button
• IconButton
• IconTextButton
• StyledEndEnhancer
• StyledLoadingSpinner
• StyledLoadingSpinnerContainer
• StyledStartEnhancer