Button

Component Overview

Buttons allow users to trigger an action or event with a single click.

The Button component is a versatile UI element used to trigger actions or navigate to new pages. It supports different visual styles, icon placements, and can function as either a standard button or a link.

When to use

• Primary buttons should be used for the main action in a section or form
• Secondary buttons are for secondary actions that are less important
• Ghost buttons are for tertiary actions or in places where visual emphasis should be reduced

Accessibility

Buttons automatically handle focus states and keyboard interactions. When using buttons:

• Use clear, action-oriented text that describes what the button does
• Ensure there's enough color contrast between the button and its background
• Avoid using buttons that rely solely on color to convey their purpose

Import

1
import Button from '@/components/Button';

Basic Usage

1
<Button>Click Me</Button>