Button

The Button is the base interactive component for demo-library: it affords navigation, form submission, and application state changes.

Three variations of Button exist to demonstrate the level of interaction: primary, secondary, and tertiary.

Usage

Import the Button component into a React component in your project:

import {Button} from 'demo-library';

Use Button by passing it children and an onClick handler in your React component:

import React from 'react'
import {Button} from 'demo-library';
export const MyComponent: React.FC<any> = () => {
  return (
    <Button
      onClick={(event) => {
        console.log('Clicked!', event)
      }}
    >
      My Button
    </Button>
  )
}

Variants

Button comes with three variations, set through the variant property:

Primary

Use the primary variant for call to action, form submission, dialog or modal trigger.

<Button>Primary button</Button>

<Button>Primary button</Button>

Secondary

<Button variant="secondary">Secondary button</Button>

<Button variant="secondary">Secondary button</Button>

Tertiary

<Button variant="tertiary">Tertiary button</Button>

<Button variant="tertiary">Tertiary button</Button>

Accessibility

The Button component has a role="button" property provided. Ensure that the element has the appropriate role for its use:

role="submit" for a form submission button
role="reset" for a form reset button

Component API

Props

Name	Type	Default value	Description	Required?
`variant`	`"primary" \| "secondary" \| "tertiary" \| undefined`	`primary`	The button's visual variant, representing the importance of the button's invoked action.	No