Button

The Button component is a flexible user interface element that allows users to interact with your application and trigger different actions and operations. Other than prebuilt 120 variants, we provide many customization options to accommodate various design preferences and use cases. Buttons are commonly placed throughout your user interface, such as in

• modal windows

• forms

• cards

• toolbars

Anatomy

The anatomy of a button component consists of essential elements such as the button label, container, prefix/suffix icon, and optional properties for customization, enabling user interaction and engagement within your application.

Properties

With our variants and variable structure, you have the creative freedom to tailor your buttons to precisely match your design preferences. All variable and variants identified exactly same on both our design system and our multi-framework component library.

Kinds

• Filled button are used to indicate the main action or the primary path a user should take. They have a strong visual indicator, encouraging users to complete their intended journey. Its a solid-colored button.

• Outlined button are typically placed alongside primary buttons and indicate that there are multiple avenues or alternative actions users can take.

• Dashed button have a dashed border. They are used to draw attention without being too visually dominant.

• Text button are used for less prominent actions to maintain focus on the primary content. They have minimal visual weight and its perfect for text links and unobtrusive calls to action.

import React from 'react';
import { PlusButton } from '@plusui/react';

const ButtonWithKind = () => (
  <>
    <PlusButton kind="filled">Filled Button</PlusButton>
    <PlusButton kind="outlined">Outlined Button</PlusButton>
    <PlusButton kind="dashed">Dashed Button</PlusButton>
    <PlusButton kind="text">Text Button</PlusButton>
  </>
);

export default ButtonWithKind;

<plus-button kind="filled">Filled Button</plus-button>
<plus-button kind="outlined">Outlined Button</plus-button>
<plus-button kind="dashed">Dashed Button</plus-button>
<plus-button kind="text">Text Button</plus-button>

<template>
  <plus-button kind="filled">Filled Button</plus-button>
  <plus-button kind="outlined">Outlined Button</plus-button>
  <plus-button kind="dashed">Dashed Button</plus-button>
  <plus-button kind="text">Text Button</plus-button>
</template>

<plus-button kind="filled">Filled Button</plus-button>
<plus-button kind="outlined">Outlined Button</plus-button>
<plus-button kind="dashed">Dashed Button</plus-button>
<plus-button kind="text">Text Button</plus-button>

Status

The Button Component comes with various statuses, each designed to convey a specific message or action to the user:

• Default: This status is the button's standard state, always ready for action and serving as the reliable foundation of your user interface.

• Primary: A special status that highlights the button's importance. It acts as the main call to action, designed to stand out and grab user attention.

• Info: Indicates that the button will provide additional information when clicked.

• Error: Signifies an action that could lead to an error or is used to highlight errors that need to be corrected.

• Warning: Warns the user of a potential risk or something that requires caution.

• Success: Denotes that an action has been successfully completed or will lead to a positive outcome.

• Invert: Reverses the color scheme of the button, which can be used to distinguish it from others or to fit a particular design aesthetic.

import React from 'react';
import { PlusButton } from '@plusui/react';

const ButtonWithStatus = () => (
  <>
    <PlusButton status="default">Default Button</PlusButton>
    <PlusButton status="success">Success Button</PlusButton>
    <PlusButton status="warning">Warning Button</PlusButton>
    <PlusButton status="error">Error Button</PlusButton>
    <PlusButton status="info">Info Button</PlusButton>
    <PlusButton status="primary">Primary Button</PlusButton>
  </>
);

export default ButtonWithStatus;

<plus-button status="default">Default Button</plus-button>
<plus-button status="success">Success Button</plus-button>
<plus-button status="warning">Warning Button</plus-button>
<plus-button status="error">Error Button</plus-button>
<plus-button status="info">Info Button</plus-button>
<plus-button status="primary">Primary Button</plus-button>

<template>
  <plus-button status="default">Default Button</plus-button>
  <plus-button status="success">Success Button</plus-button>
  <plus-button status="warning">Warning Button</plus-button>
  <plus-button status="error">Error Button</plus-button>
  <plus-button status="info">Info Button</plus-button>
  <plus-button status="primary">Primary Button</plus-button>
</template>

<plus-button status="default">Default Button</plus-button>
<plus-button status="success">Success Button</plus-button>
<plus-button status="warning">Warning Button</plus-button>
<plus-button status="error">Error Button</plus-button>
<plus-button status="info">Info Button</plus-button>
<plus-button status="primary">Primary Button</plus-button>

States

The button component also has different states to communicate interactivity and feedback to users.

• Default state when it is available for interaction but not being interacted with.

• Hovered state when the cursor hovers over it, indicating potential interactivity.

• Pressed state appears when the button is clicked, giving visual feedback that the action has been triggered.

• Disabled state is used when a button cannot be interacted when a particular action is unavailable.

• Loading state is displayed when the button triggers a time-consuming operation, like submitting a form or fetching data.

import React from 'react';
import { PlusButton } from '@plusui/react';

const ButtonExamples = () => (
  <>
    <PlusButton>Button</PlusButton>
    <PlusButton disabled>Button</PlusButton>
    <PlusButton loading>Button</PlusButton>
  </>
);

export default ButtonExamples;

<plus-button>Button</plus-button>
<plus-button disabled>Button</plus-button>
<plus-button loading>Button</plus-button>

<template>
  <plus-button>Button</plus-button>
  <plus-button disabled>Button</plus-button>
  <plus-button loading>Button</plus-button>
</template>

<plus-button>Button</plus-button>
<plus-button disabled>Button</plus-button>
<plus-button loading>Button</plus-button>

Icon

Incorporating icons into buttons can enhance the user experience by providing visual cues, improving aesthetics, and simplifying interactions.

• No Icon button is often used for actions that are self-explanatory or when a text label alone provides sufficient context

• Prefix Icon button is positioned before the text label on a button, offering additional context or visual emphasis to the action.

• Suffix Icon button appear after the text label, offering visual cues or feedback related to the action.

• Icon-Only button use visual symbols without any accompanying text. They are ideal when actions can be represented by universally recognised icons, reducing clutter and text translations.

import React from 'react';
import { PlusButton } from '@plusui/react';

const ButtonWithIcons = () => (
  <>
    <PlusButton>Button</PlusButton>  {/* No icon */}
    <PlusButton>
      <i className="fa-solid fa-plus"></i> Button  {/* Prefix icon */}
    </PlusButton>
    <PlusButton>
      Button <i className="fa-solid fa-plus"></i>  {/* Suffix icon */}
    </PlusButton>
    <PlusButton>
      <i className="fa-solid fa-plus"></i>  {/* Icon-only */}
    </PlusButton>
  </>
);

export default ButtonWithIcons;

<plus-button>Button</plus-button>  <!-- No icon -->
<plus-button><i class="fa-solid fa-plus"></i> Button</plus-button>  <!-- Prefix icon -->
<plus-button>Button <i class="fa-solid fa-plus"></plus-button>  <!-- Suffix icon -->
<plus-button><i class="fa-solid fa-plus"></plus-button>  <!-- Icon-only -->

<template>
  <plus-button>Button</plus-button>  <!-- No icon -->
  <plus-button><i class="fa-solid fa-plus"></i> Button</plus-button>  <!-- Prefix icon -->
  <plus-button>Button <i class="fa-solid fa-plus"></i></plus-button>  <!-- Suffix icon -->
  <plus-button><i class="fa-solid fa-plus"></plus-button>  <!-- Icon-only -->
</template>

<plus-button>Button</plus-button>  <!-- No icon -->
<plus-button><i class="fa-solid fa-plus"></i> Button</plus-button>  <!-- Prefix icon -->
<plus-button>Button <i class="fa-solid fa-plus"></plus-button>  <!-- Suffix icon -->
<plus-button><i class="fa-solid fa-plus"></plus-button>  <!-- Icon-only -->

Size

The Button component supports different sizes such as small, medium, large to fit various design requirements.

import React from 'react';
import { PlusButton } from '@plusui/react';

const ButtonWithSizes = () => (
  <>
    <PlusButton size="sm">Small Button</PlusButton>
    <PlusButton size="md">Medium Button</PlusButton>
    <PlusButton size="lg">Large Button</PlusButton>
  </>
);

export default ButtonWithSizes;

<plus-button size="sm">Small Button</plus-button>
<plus-button size="md">Medium Button</plus-button>
<plus-button size="lg">Large Button</plus-button>

<template>
  <plus-button size="sm">Small Button</plus-button>
  <plus-button size="md">Medium Button</plus-button>
  <plus-button size="lg">Large Button</plus-button>
</template>

<plus-button size="sm">Small Button</plus-button>
<plus-button size="md">Medium Button</plus-button>
<plus-button size="lg">Large Button</plus-button>

Button Event Handling

Button events are used to perform specific actions when a button is clicked. With the Plus-Button component, you can use the "plus-click" event to capture button click events and trigger functions accordingly.

import React from 'react';
import { PlusButton } from '@plusui/react';

const ButtonWithPlusClick = () => (
  <PlusButton onPlusClick={() => console.log("Button was clicked!")}>Click Me</PlusButton>
);

export default ButtonWithPlusClick;

import { Component } from '@angular/core';

@Component({
  selector: 'app-button-example',
  template: `<plus-button (plus-click)="handleClick()">Click Me</plus-button>`,
})
export class ButtonExampleComponent {
  handleClick() {
    console.log("Button was clicked!");
  }
}

<template>
  <plus-button @plus-click="handleClick">Click Me</plus-button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      console.log("Button was clicked!");
    }
  }
}
</script>

<plus-button id="my-button">Click Me</plus-button>

<script>
document.getElementById('my-button').addEventListener('plus-click', function (event) {
  console.log('Button clicked');
});
</script>

Layout & Spacing

Layout and spacing for buttons in user interfaces are crucial for usability, aesthetics, and accessibility. By paying attention to the placement and spacing of buttons, designers can create interfaces that are both visually appealing and user-friendly, ultimately enhancing the overall user experience.

Light & Dark Mode

Providing both light and dark modes for buttons in user interfaces enhances user comfort, choice, accessibility, and energy efficiency. It also aligns with contemporary design trends and accommodates a variety of user preferences and needs.

Accessibility

Accessibility is not only a moral and legal imperative but also a valuable design principle. Ensuring that buttons in a design system are accessible not only benefits users with disabilities but also leads to a more inclusive, user-friendly, and successful digital product.

To learn more about Plus UI's accessibility criteria, please visit Accessibility.

Design System

API

Props

Events

Slots