#Button

The Button is the base interactive component for hello-next-js: 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 'hello-next-js'

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

import React from 'react'
import {Button} from 'hello-next-js'
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	Description	Required
`variant`	`ButtonVariant`	`primary`	The button's appearance variation

#Methods

No methods found