Button

ReactProps

Github Storybook Markdown Copy for LLM

A button allows a user to perform an action, with mouse, touch, and keyboard interactions.

Import

import { Button } from "@cfa/react-core";

Live Editor

Guidelines

When to use

• Button is for triggering an action, such as save, cancel, or delete.

Do

• Label with a clear action verb tied to the outcome.
• Limit one Primary button per screen.
• Use Primary for the most important action. Use Secondary for supporting actions. Use Tertiary for low-emphasis actions. Use Destructive only for irreversible data loss.
• Use Confirm + Cancel for reversible flows. Cancel should be Tertiary.
• Use Destructive + Cancel for irreversible actions. Add a confirmation step before the action runs.
• Use Secondary for equal-weight toolbar actions.
• In horizontal action rows such as dialogs and form footers, place Primary on the right and Cancel on the left in left-to-right layouts.

Avoid

• Using vague destructive labels such as Yes or Confirm. Name the action, such as Delete Account.
• Using Primary when no action should dominate, including equal-weight toolbar actions.
• Using Button for navigation to a URL. Use Link.
• Nesting buttons or wrapping a Button in an <a>.

Events

Event Handlers

Use onPress instead of onClick.

The Button is built with the onPress prop, similar to onClick, but supports all user interactions via mouse, keyboard, and touch. The onPressStart, onPressEnd, and onPressChange events are triggered when a user presses, releases, or changes the state of the Button.

These handlers receive a PressEvent with information on type of event and the target.

PressEvent Props

Property	Type	Description
type	'pressstart' | 'pressend' | 'pressup' | 'press'	The type of press event being fired.
pointerType	PointerType	The pointer type that triggered the press event.
target	Element	The target element of the press event.
shiftKey	boolean	Whether the shift keyboard modifier was held during the press event.
ctrlKey	boolean	Whether the ctrl keyboard modifier was held during the press event.
metaKey	boolean	Whether the meta keyboard modifier was held during the press event.
altKey	boolean	Whether the alt keyboard modifier was held during the press event.
x	number	X position relative to the target.
y	number	Y position relative to the target.

PressEvent Methods

Method	Description
continuePropagation(): void	By default, press events stop propagation to parent elements. In cases where a handler decides not to handle a specific event, it can allow propagation.

Examples

Variant

Size

Leading & Trailing Icon

To render an icon inside of the Button component, pass the icon as a child along with the label.

LinkButton

The LinkButton component provides the same styling as the Button component but renders as an anchor (<a>) element using React Aria’s Link component underneath. It’s ideal for navigation actions that should visually appear as buttons.

Import

import { LinkButton } from "@cfa/react-core";

Example

LinkButton vs Button

• Use LinkButton when the action navigates to a new page or URL
• Use Button when the action performs an operation but stays on the same page
• LinkButton accepts the same styling props as Button (variant, size, fullWidth, isDisabled)
• LinkButton accepts standard anchor attributes like href, target, etc.

Styling

The LinkButton component supports all the same styling options as the regular Button component (variants, sizes) shown in the examples above. You can add icons, use different variants, and adjust sizes in the same way.

BaseButton

The BaseButton is an unstyled HTML button element that primarily is used as a wrapper to build for building custom button components. It does not include any default styles or behaviors, allowing you to fully customize its appearance.

Import

import { BaseButton } from "@cfa/react-core";

Example