Button

Hello

() => alert("click")

import * as React from "react";
import { Button } from "baseui/button";
export default () => {
  return (
    <Button onClick={() => alert("click")}>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 kind 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

Button exports

You can import this module like so:

import {Button} from 'baseui/button'

It exports the following components or utility functions:

• Button
• KIND
• SIZE
• SHAPE
• StyledBaseButton
• StyledStartEnhancer
• StyledEndEnhancer
• StyledLoadingSpinner
• StyledLoadingSpinnerContainer