Button is a user interface element typically used to trigger some action or event. Users can click the button to perform specific functions, such as submitting a form, launching a program, or navigating to other pages. Buttons usually appear in rectangular or circular shapes and can contain text, icons, or a combination of both.
Basic#
Types#
There are 5 types of buttons: Primary Button, Classic Button, Secondary Button, Tertiary Button, Ghost Button.
Composition Elements#
Buttons are typically composed of text/icons. The text/icons form the display content of the button, which can appear alone or in combination.
- Icon
- Text
- Shortcut
According to the combination method, there are the following combinations:
- Text-only Button
- Left Icon + Text
- Right Icon + Text
- Icon-only Button
Shortcuts#
Each button has a combination key that can be triggered directly through keyboard mode.
Interaction States#
Different types of buttons have five states: Default, Disabled, Hover, Focus and Active.
Sizes#
All button types have three sizes: Medium, Small, and Extra Small.
Usage#
When to Use#
In Wis, buttons are mostly used within containers/components and follow the rules of their respective containers/components. When conditions permit, they can be used for custom functions.
Within a container, there is usually a fixed Action area to hold buttons; different containers will have different corresponding rules for the type and number of container buttons.
