Button

The Button component is used to trigger an action, such as "Add", "Cancel", "Delete" or "Save".

For navigational actions that appear within a block of text, use the link component. For buttons that only display an icon, and do not display a label, use the icon button component.

Import

• Button: The interactive button component
• ButtonGroup: A wrapper that displays multiple buttons together

import { Button, ButtonGroup } from '@outfitio/outkit';

Usage

Button variants

Use the variant prop to change the visual style of the Button. You can set the value to solid, ghost, outline, or link.

Solid

Used most in the interface. Only use another style if a button requires less visual weight.

The primary variant color is used to highlight the most important actions. Never use more than one primary button in a section or screen.

Outline

Used when a button requires less visual weight. These can be used in isolation or paired with a solid button.

Ghost

Used for the least prominent actions; usually alongside a primary button.

Link

Used when a button is required inline, such as embedded within a table.

Button sizes

Use the size prop to change the size of the button. You can set the value to xs, sm, md, or lg.

Button with icon

An icon can be added to the left or right of a button label to clarify an action or call attention to the button.

Button loading state

Pass isLoading prop to the Button component to show it's loading state. You can optionally pass loadingText prop, if you do, the button will show a spinner and the loading text. Otherwise, the button will take the width of the text label and show only the spinner.

A loading state should be used when a button has been pressed and the associated action is in progress. For example, while a document is saving.

Disabled buttons

Set isDisabled to disable a button. When disabling a button, always provide a tooltip explaining why the button is disabled.

Buttons should be disabled if it's possible to click them later (for example, a user needs to name a project before they can create it) or if it will cause confusion to hide it (e.g., the user expects to be able to delete a file, and you need to to show them it is not possible for their permission level).

If neither of these conditions apply, simply hide the button instead.

Custom buttons

In event you need to make your own custom button, you can leverage the PseudoBox component. Always include the as="button" prop to ensure custom buttons render the correct semantic element. Use the hover, focus, active and disabled style props to style the button states.

Accessibility

• The button component semantically renders as <button>.
• Buttons use browser defaults for keyboard interaction. Give buttons keyboard focus with the tab key (or shift + tab when tabbing backwards). Activate buttons with the enter / return or space key

Best Practice

Buttons should:

• Have clear and predictable text labels
• Follow the {verb}+{noun} content formula to provide clarity to users, except in the case of common actions like "Close", "Cancel" or "OK",
• Use sentence case, where the first word is capitalised and the rest are lowercase, unless the term is a proper noun
• Be positioned in consistent locations in the interface

Button groups should:

• Only group related actions
• Consider how multiple buttons will look on small screens

Props

The Button composes the PseudoBox component so you can pass props for PseudoBox. These are props related to the Button component.