Documentation
ChevronDown

Button

The Button component is a reusable UI element for user interaction in the application. It provides a consistent visual style and behavior for buttons throughout the application.

Usage

To use the Button component, import it into your React component and render it with the appropriate props. The following props are available:

  • isDisabled: A boolean indicating whether the button is disabled.
  • isFluid: A boolean indicating whether the button should take up the full width of its container.
  • isLoading: A boolean indicating whether the button is in a loading state.
  • isLoadingText: The text to display when the button is in a loading state.
  • mode: The visual style of the button, can be "fill", "pill", "link", or "menu".
  • label: The text to display inside the button.
  • href: The URL to link to, if the button should be a link.
  • target: The target attribute for the link, if href is specified.

Here is an example usage of the Button component:

JSX
Copy Copy
import Button from '@aura-design/system/button';

<Button label="Click me!" onClick={() => alert('Button clicked!')} />

States

Buttons can be in various states depending on user interaction. The following states are available:

  • Default: This is the default state of the button.
  • Disabled: This state is triggered when the button is disabled.
  • Loading: This state is triggered when the button is in a loading state.

Accessibility

Buttons should be designed with accessibility in mind. The following guidelines should be followed:

  • Buttons should have a descriptive label that explains the action that will be taken when the button is clicked.
  • Buttons should have a discernible focus state and be keyboard navigable.
  • The button should have an appropriate contrast ratio between the text and background color.