One step above links in terms of complexity, button components help users complete an action on your website or app.
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.
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.
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.
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.
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.
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:
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.
