Button

Purpose

The Button component is a styled HTML button.

Basic Implementation

import Button from '@wedgekit/button';

const Example = () => {
  const [domain, setDomain] = React.useState('primary');

  return (
    <div>
      <Button
        domain={domain}
        onClick={() => setDomain(domain === 'primary' ? 'secondary' : 'primary')}
      >
        Click Me
      </Button>
    </div>
  );
};

render(<Example />);

Props

In addition to the props listed below, all native and React HTML attributes will be passed through.

children

Type: string

Required: ❌

The string label for the button. The label should be descriptive and readable. If children is not used, an aria-label should be added for accessibility.

domain

Type: 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'default' | 'white'

Required: ❌

A string denoting the domain of the Button. This defaults to 'default'.

fullWidth

Type: boolean

Required: ❌

Sets the button to fill the full-width of its parent container.

icon

Type: IconTag

Required: ❌

Optional prop to display an icon positioned left of the text. An IconTag is a snake-cased name of a provided icon. A full list can be found here

label

Type: string

Required: ❌

A label describing the type of button. If none is provided, the child string will be used for 'aria-label'

submitting

Type: boolean

Required: ❌

Indicates button is in a submitting state. Will display a spinner if true.

variant

Type: 'noFill' | ‘neutral’ | 'outline'

Required: ❌

A string denoting the variant style of the Button. This defaults to 'neutral'.