How they help
Buttons help users navigate, interact with, and accomplish goals on a webpage or application.
Example of buttons
Types
Delish has 3 button types: default, menu and compound.
- Default: a simple button, this is the default type
- Menu: these toggle open a menu of options
- Compound: has additional content like a description and image
Visual of types
Anatomy by type
- Container: holds text and icon
- Text: clear and concise text giving the user insight into what will happen when they click it
- Icon: optional visual to give clarity to user
- Container: holds text and icon
- Icon: optional visual to give clarity to user
- Text: clear and concise text giving the user insight into what will happen when they click it
- Caret: icon to communicate the button will open below
- Container: holds text and icon
- Image: optional visual to give clarity to user
- Title text: clear and concise text giving the user insight into what will happen when they click it
- Description: additional text for user
Variants by type
There are 4 variants of the default component: text only, icon before, icon after and icon only. The default is text only.
While icon variants are available, icons are not always universal in meaning and could cause confusion to users from different backgrounds or cultures. With that said though, just proceed with caution and make sure the icon makes sense.
There are 3 variants of the menu component: text only, icon before and icon only. The default is text only.
While icon variants are available, icons are not always universal in meaning and could cause confusion to users from different backgrounds or cultures. With that said though, just proceed with caution and make sure the icon makes sense.
There are 2 variants of the compound component: with and without image. The default is with image. You can use either an icon or image.
Designer resources