Button code

---

Import

import { Button } from '@pluralsight/react'

API

Parameters

interface ButtonOptions extends ButtonHTMLAttributes<HTMLButtonElement> {
  sentiment?: 'default' | 'action' | 'danger'
  usage?: 'filled' | 'outline' | 'text'
  size?: 'md' | 'lg'
  endIcon?: ReactNode
  startIcon?: ReactNode
}

1. Any props that can be passed to an HTML button element.

2. sentiment - Determines the theme of the button. Defaults to action.

3. usage - Determines the visual style of the button. Defaults to filled.

4. size - Determines the size of the button. Defaults to lg
5. endIcon - Determines the icon to display at the end of the button.

6. startIcon - Determines the icon to display at the start of the button.

Size Mapping

1. md: Use in condensed areas where the default size is too large.
2. lg: Should be used in most, if not all cases.

Customizing

There are 3 ways to customize the Button component: using the button recipe, extending the recipe, or passing a className prop.

Button recipe

Pando makes use of the . This means that you can pull the Pando Button styles into any component that accepts classes or classNames, including html.

Pitfall

Recipes only generate css class names. This means that a11y concerns will have to be handled manually because they cannot be automatically included like in Pando’s React components package.

There are a number of variants available for the button recipe:

1. palette: “action” | “neutral” | “danger”

2. size: “md” | “lg”

3. usage: “text” | “outline” | “filled”

Extending the Button recipe

Using , you can extend the Button recipe to extend Pando button styles.

import { css, cx } from 'styled-system/css'
import { button } from 'styled-system/recipes'

const newClassName = cx(button(), css({ bg: 'Thistle', color: 'black' }))

Button recipe extended

Passing a className prop

You can pass a className prop to the Button component to customize the Button. This is useful if your project uses or a CSS-in-JS library like .

import customStyles from './customStyles.module.css'

function CustomButton(props) {
  return <Button className={customStyles.customButton}>{props.children}</Button>
}