Files, Figma
Buttons UI Kit - A Collection of Buttons , Fully Auto Layout
Author
Di Smolskii
Published
March 30, 2024
A
button in UI design is a graphical user interface element that a user can click or tap on to trigger an action or a series of actions. Buttons can be found in various applications, websites, and software interfaces.
In UI design, buttons are typically designed with a distinct visual style that sets them apart from other interface elements, such as text, images, or icons. A button may include text, an icon, or both, and it may be designed with different colors, shapes, and sizes to communicate its purpose and to help the user identify it quickly.
Where can buttons be used?
- Submitting a form
- Saving data
- Canceling an action
- Starting or stopping a process
- Navigating between pages or sections
- Opening a menu or a dialog box
- Performing an action, such as deleting an item, printing a document, or sending a message
Size
- Small buttons: Used for secondary or tertiary actions or as part of a group of buttons.
- Medium buttons: Used for primary or secondary actions
- Large buttons: Used for prominent calls-to-action or in situations where the button needs to stand out.
Type
- Standard button: This is a basic button that has a solid color or gradient background and may contain text or an icon
- Outline button: This type of button has a transparent or semi-transparent background with a colored border. It’s often used to indicate a secondary action or to provide a less prominent option
State
- Normal State: This is the default state of the button. The button is visible, but not yet clicked or interacted with. It has a default color and style
- Hover State: This is the state when the user hovers their mouse over the button. The button may change its appearance, such as by highlighting or animating
- Disabled State: This state indicates that the button cannot be interacted with or clicked. It may appear grayed out or have reduced opacity
