doc-burger

Button

A component that triggers an event or action when clicked

A button is a fundamental user interface element that triggers an event or action when clicked. Buttons are a critical component in user interactions, allowing users to perform actions and navigate within your app.

button component of Peaka

Key Features

  • Initial Styles and Customization: Customize button appearance, behavior, and more to align with your specific application's design and functionality.
  • Label: Display concise and descriptive text on the button to indicate its purpose.
  • Severity: Change the background color of the button based on the severity or importance of the associated action.
  • Size: Adjust the button's size to fit your design preferences and layout.
  • Raised: Enable or disable button focus as needed.
  • Rounded: Give the button a distinctive rounded border.
  • Text Button: Create a text button appearance with a transparent background and no border.
  • Outlined: Create an outlined button style with a transparent background and a border.

How to Use Buttons

To use buttons in your application, follow these simple steps:

  1. Label: Specify the text you want to display on the button using the label property.

  2. Severity: Use the severity select option to set the button's background color based on the importance or severity of the associated action.

  3. Size: Choose the appropriate size for your button based on your design preferences and available space.

  4. Customize the button's appearance and behavior using the provided options based on your specific needs.

Use Cases

Buttons can be used in various scenarios, including:

  • Action triggers: Implement buttons to trigger actions such as submitting a form, saving changes, or deleting items.
  • Confirmation: Employ buttons for confirming critical actions, preventing accidental data loss, or deletions.

Buttons are versatile UI components that play a crucial role in enhancing user interactions and guiding users through your application.