Buttons

Buttons are used as triggers for actions. They are used in forms, toolbars, dialog footers and as stand-alone action triggers.

Table of Contents

• Installation
• IconButton
• MenuButton

Installation

yarn add @easyfeedback/buttons
# or
npm i @easyfeedback/buttons

IconButton

IconButton composes the Button component except that it renders only an icon.

Since IconButton only renders an icon, you must pass the ariaLabel prop, so screen readers can give meaning to the button.

Import component

import { IconButton } from '@easyfeedback/buttons'

General usage

<IconButton ariaLabel="Add new item" />

Icon Sizes

Use the size prop to change the width and height of the button. You can set the value to sm or lg.

<VStack>
  <IconButton ariaLabel="Add new item" size="sm" />
  <IconButton ariaLabel="Submit the form" size="lg" />
</VStack>

Icon Variants

Use the variant prop to change the icon inside the button. You can set the value to add or plane.

<VStack>
  <IconButton ariaLabel="Add new item" variant="add" />
  <IconButton ariaLabel="Submit the form" variant="plane" />
</VStack>

Props

| Name | Description | type | Default | | --------- | ---------------------------------------- | -------------------------------------- | ------- | | ariaLabel | A11y: A label that describes the button. | string | - | | size | The size of the button. | 'sm' \| 'lg' | lg | | variant | The icon variant to render. | 'add' \| 'plane' | add | | onClick | [Optional] | MouseEventHandler<HTMLButtonElement> | - |

MenuButton

An accessible dropdown menu for the common dropdown menu button design pattern. Menu uses roving tabIndex for focus management.

This special Menu is set with the IoEllipsisVertical icon.

Import component

import { MenuButton } from '@easyfeedback/buttons'

Usage

const myMenuItems: [
  { icon: IoDuplicateOutline, title: 'Duplicate' },
  { icon: IoMove, title: 'Move' },
  { icon: IoPricetagOutline, title: 'Assign tags' },
  { icon: IoPencil, title: 'Save as template' },
  { icon: IoTrashBinOutline, title: 'Delete', color: 'red.500' },
]

<MenuButton menuItems={myMenuItems} />

// Optional there you can change the color of the navigation icon
<MenuButton menuItems={myMenuItems} color="red.500" />

// Or the size of the icon
<MenuButton menuItems={myMenuItems} fonSize="lg" />

Props

| Name | Description | type | Default | | --------- | -------------------------------------------------------- | ---------------------- | ------- | | menuItems | The list of menu items. | MenuListItem[] | - | | color | [Optional] The color of the IoEllipsisVertical icon. | string | - | | fontSize | [Optional] The size of the IoEllipsisVertical icon. | 'sm' \| 'md' \| 'lg' | md |