AppButton

Molecule

Communicates actions that users can take that affect the application’s front-end or back-end. Unlike Links that navigate the users to a different interface, App Buttons let the users manipulate data. In cases where both data manipulation and navigation are involved an App Button will be used. Icon are included to convey meaning quicker, so use where possible. For a button with only an icon and no text use Icon Buttons. For important, data-invasive actions use App Buttons and not Icon Buttons.

Playground

Icon

noneadd_home_workadd_layeradd_linkadd_useraialertangleapplyappsapps_arrowarrows_outwardattachmentattic_wallavataraxesbackbugcalendarcheckcheck_filledchecklistchevron_downchevron_leftchevron_rightchevron_upcircleclosecloud_uploadcollapsecolumnsconstructioncoordinatescubecube_groupcustom_geometrydoordouble_chevron_downdouble_chevron_leftdouble_chevron_rightdouble_chevron_updownloaddownwardduplicatedusterdwgeditelement_core_layerelement_inside_layerelement_insulationelement_outside_layererrorexcelexpand_1expand_2export_fileseyeeye_hiddenfibernox_logofibernox_no_tipfilefilterfilter_dropdownfilter_dropdown_messagefilter_removefolderforwardgearhelphidden_layerhomehome_workimage_arrow_upinfojva_fjva_nlanguagelayerlayoutlink_offlistlistsloadslockedloginlogoutmailmenuminusmore_optionsmultiple_layersnew_tabno_split_scenenotificationnotification_updateopeningoutputpluspohlcon_logopreviewquestionrectangleredoreloadremove_userrowsrulersandwich_core_layersandwich_insulationsandwich_outside_layersavescreen_with_appsscreen_with_downloadscreen_with_gearscreen_with_webscrollsearchsearch_layersearch_usersendsloped_side_wall_leftsloped_side_wall_rightsplit_scenestandard_wallstar_shinestar_usersumswatchswatch_alertsyncticktrashundounlockeduploadupwarduservillavilla_addvilla_infowindowzoom_inzoom_out

Tooltip

Tooltip Position

Top CenterTop RightTop LeftBottom CenterBottom RightBottom Left

Top Center

Type

PrimarySecondaryTertiaryTertiary Dark

Primary

Text

To

Disabled

Loading

Trailing Icon

Fill Container

Tiny Size

---

Playground Theme

Dark Mode

Purple Background

        
          

            <
            AppButton

            





            

                type
              
                =
                "primary"
              

                text
              
                =
                "App Button"
              

                size
              
                =
                "default"
              

                tooltipPosition
              
                =
                "top-center"
              



  />

Anatomy

1. Container - this is the clickable area of the button, its appearance changes depending on the state. It has a minimum width of 32 px just in case.
2. Text - custom text to describe the action of the button.
3. Icon (leading) - can be hidden or swapped.
4. Icon (trailing) - can be hidden or swapped.

Properties

export type AppButtonProps =
  & ElementProps
  & TooltipProps
  & {
    secondary?: boolean;
    tertiary?: boolean;
    tertiaryDark?: boolean;
    icon?: IconName;
    trailingIcon?: boolean;
    isLoading?: boolean;
    disabled?: boolean;
    text?: string | number;
    to?: string;
    fillContainer?: boolean;
    size?: 'default' | 'tiny';
    textColor?: string;
  };

States

Default, Hover, Pressed, Focus and Locked

Variants

Type

• Primary - the main button that is often used in applications as the main action in the page (e.g. to submit a form). It reflects the brand-color.
• Secondary - used in contrast to and in the same context as Primary button with relatively less emphasis (e.g. to abort the session). It is important to distinguish between a Cancel action that is a Link and Abort action that can be a Secondary Button, as in case of latter, user may lose any progress (data) made in the process.
• Tertiary Brand - is used for the least important actions in UI. They look similar to Links but differ from them in their functionality. While links navigate user to a different page/section, AppButton Tertiary performs actions, such as opening/closing a section, removing an element, etc
• Tertiary Dark - same, but used for the least important actions in the given flow.

Size

Default or Tiny

Icons

Show or hide ions leading and/or trailing the button text. These can also be swapped for any icon in the Atom component “Icons”. There is a preferred list of icons set up consisting of Edit, Search, Upload and Download.