Button Overview

---

Description

Pando’s <Button /> is an interactive element that performs an action when activated. It can be used with text and a start or end icon. It is not meant to contain only an icon. If you would like to use a Button with only an icon, please see

<Button /> has custom props as well as access to all native <button /> attributes. for more information on the native <button /> element including attributes and behavior

Examples: submitting a form, closing a modal, adding a row, or canceling a form

When to use

Buttons are meant to be used to perform an action. Unless it is to move between steps of a multi-page action, avoid using <Button /> for navigation purposes. Instead, use the .

Button Anatomy

1. Button
2. Start icon
3. Label
4. End icon

Import

import { Button } from '@pluralsight/react'

Variations

Props

Default

  {
    palette: 'action',
    usage: 'filled',
    size: 'lg',
    endIcon: null,
    startIcon: null
  }

All Options

Note: those denoted with ? are optional

  {
    palette?: 'action' | 'neutral' | 'danger',
    usage?: 'filled' | 'outline' | 'text',
    size?: 'md' | 'lg',
    endIcon?: ReactNode,
    startIcon?: ReactNode
  }