button

A button can be described as a symbol that represents a potential action. It serves as a gateway between the user's intention and the digital realm. A button's design and positioning within the interface can convey meaning and influence the user's perception and interaction with the program.

It embodies the idea of agency and choice. By clicking on it, the user asserts their will and directs the technology to perform a specific task. The button serves as a tangible manifestation of the user's power to shape their digital environment. It is a small but crucial element of the overall design of the user interface. Its visual appearances, such as color, shape, and size, contributes to the overall aesthetic and emotional impact of the technology.

[JSX] Button component

import { Button } from 'ana-components';

export default function () {
    return <Button>Submit</Button>;
}

[HTML] Rendered HTML

<button class="btn">Submit</button>

type

In an interface, the property of button type wields significant influence over its appearance, specifically in regard to the contrast between its color and the background behind it. Abstaining from hierarchical naming conventions such as "primary" and "secondary," the types are named to reflect the contrasting hues of the theme's colors.

contrast

Contrast buttons are typically used to initiate the main action in a user interface, such as submitting a form or confirming a purchase. They are usually designed to stand out and be highly visible to the user, making it clear what the most important action is.

Panel

Panel buttons are used for less important actions or for actions that are related to the main action but are not the primary focus. They might be used to cancel a form or to provide additional information.

invisible

Invisible buttons are used for actions that are less frequently used or for actions that are not as important to use other buttons. These buttons might be used to access advanced features or to provide additional information.

disabled

A disabled state is used to indicate that a button is not currently available for use, such as when a form is incomplete. This type must be generally avoided with careful user experience design, but it is available for a few extreme cases.

error

An error state is used to indicate that an error has occurred, such as when the user has entered incorrect information or when a system error has occurred. These states provide important information to the user, helping them understand the state of the system and what actions are possible at any given time.

Input button

(Main Page: Input Button) Using <input> in a <form> element provides a semantic, compatible, and straightforward solution for interacting with a form. While <button> and <a> elements have their own advantages and can be used for different purposes, <input type="button"> is the best choice for buttons that need to submit form data.

[JSX] Do

<form>
  <Input type="submit"/>
</form>

[JSX] Don't

<form>
  <Button onClick={submitForm()}>Submit</Button>
</form>
Error message.