Button Component

One step above links in terms of complexity, button components help users complete an action on your website or app.

What is a button component?

A button is a clickable component that triggers an action. Buttons can be used to submit a form, navigate to a different page, or complete any other command depending on where it is located on a website or application.

Fun fact: Buttons within a <form> will automatically submit the form unless they are configured to do something else.

Clickable buttons

Best-practices state that buttons should be designed to look pressable. Instead of a simple line frame, web designers recommend that a button component uses bold borders, drop shadow, glare, or shading, to look like a three-dimensional, pushable button.

Examples of buttons in websites and applications

Share buttons

Share buttons allow users to share your page’s content via email, web, or social media links.

Social media share buttons use a special URL functionality that social media sites allow, which essentially encodes a post as a long hyperlink. On twitter, for example, a button’s href would “link” to a special url. twitter.com/share?, and everything following the question mark conveys the information to be posted in the tweet.

Example: Inspect the syntax of this Twitter link! (It won’t post anything unless you click “tweet.”)

Email sharing links work similarly in principle, except they use a mailto URL.

Dropdown buttons

A dropdown button displays a list of items when pressed. These are common for any app or website form designed to list records. E-commerce sites often use dropdowns to select color or quantity.

One benefit of using dropdown buttons is that it saves visual space in your applications. Any similar items that can be rolled up into a menu might benefit from being presented behind a dropdown button.

CTA buttons

Call-to-action (CTA) buttons are versatile, and are arguably the unsung heroes of web and app development. They’re the standard button you recognize from websites and applications, like Amazon’s famous “buy now” button.

CTA buttons can be configured to do just about anything. In forms, they default as “submit,” but can also be configured to do other things. A press of a CTA button usually represents a “conversion,” or completion of the interface designer’s intended goal.

Button states

Buttons have states that need to be designed for, depending on a user’s interaction with the button. The state of the button will determine what it looks like. The main four are:

  • Default: How the button looks unless another state is selected.
  • Hover: When a mouse hovers over the button, its appearance changes to imply that it is clickable.
  • Active: When the button is clicked, it looks recessed, like an actual button being pressed.
  • Loading: When an action is being taken, like a form is updating or saving, the button will have a progress spinner, loading bar, or even display text that conveys what is happening, like “saving…” or “loading…”.

Button components in Internal

Buttons in Internal are used to perform an action specified by the user. These can include functions like calling an API, updating data, or inserting new data.

Once connected to a data source, buttons will be configurable to a number of automatically-generated functions based on the available APIs of the app. Any custom functions that you’ve created for a database or HTTP service will also appear.

For more information about the flexibility of Internal’s button components—including how to get started—check out the button component documentation.

More button component resources:

CSS Tricks: A complete guide to links and buttons

UX Planet: Basic types of buttons in user interfaces