Skip to content
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
87 lines (62 sloc) 2.74 KB

import Example from '../../components/example'; import API from '../../components/api'; import Layout from '../../components/layout';

import BasicButton from 'examples/button/basic.js'; import Kinds from 'examples/button/kinds.js'; import Sizes from 'examples/button/sizes.js'; import WithEnhancer from 'examples/button/with-enhancers.js'; import States from 'examples/button/states.js'; import Shapes from 'examples/button/shapes.js'; import Dropdown from 'examples/button/dropdown.js'; import ButtonAsAnAnchor from 'examples/button/as-an-anchor.js';

import Overrides from '../../components/overrides'; import Yard from '../../components/yard/yard';

import {Button, KIND} from 'baseui/button'; import * as ButtonExports from 'baseui/button'; import Upload from 'baseui/icon/upload'; import ArrowRight from 'baseui/icon/arrow-right';

export default Layout;


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.

You can’t perform that action at this time.