Button

Buttons simplify user interactions with a single tap, enhancing the user experience and aiding those with mobility issues.

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.

anatomy of button component

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	Status	States	Icons	Size
Filled	Default	Default	No icon	Small
Outlined	Primary	Hovered	Prefix icon	Medium
Dashed	Info	Pressed	Suffix icon	Large
Text	Error	Disabled	Icon only
	Warning	Loading
	Success
	Invert

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.

React

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;

Angular

<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>

Vue

<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>

Javascript

<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.

React

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;

Angular

<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>

Vue

<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>

Javascript

<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.

React

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;

Angular

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

Vue

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

Javascript

<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.

React

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;

Angular

<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 -->

Vue

<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>

Javascript

<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.

React

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;

Angular

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

Vue

<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>

Javascript

<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.

React

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

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

export default ButtonWithPlusClick;

Angular

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!");
  }
}

Vue

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

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

Javacript

<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.

Button's Layout & Spacing

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.

We structured the design system simply switch from the light mode to the dark mode within the Layer > Color section.

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.

Criteria	Description	Status
Discernible Text	Ensures buttons have discernible text	✔️ Passed
ID Attribute	Ensures every id attribute value is unique	✔️ Passed
Interactive Controls	Ensures interactive controls aren’t nested as they are not always announced by screen readers or can cause focus problems for assistive technologies	✔️ Passed
Tabindex Attribute	Ensures tabindex attribute values are not greater than 0	✔️ Passed
Color Contrast	Ensures the contrast between foreground and background colors meets WCAG 2 AA contrast ratio thresholds.	✔️ AA ~ AAA

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

Design System

Plus UI Design System | Figma CommunityFigma

Plus UI Design System on Figma

API

Props

Property	Description	Type	Accepted Values	Default
kind	Button kind	string	filled, outlined, dashed, text	filled
status	Button status	string	primary, default	default
size	Button size	string	sm, md, lg	md
disabled	Button disabled	boolean	-	false

Events

Event Name	Description	Parameters
plus-click	Button click event	-
plus-focus	Button focus event	-
plus-blur	Button blur event	-

Slots

Name	Description
default	Button content