IconButton

Atom

Graphical UI elements that allow users to interact with the application. They serve as simple and intuitive graphical representations of functions that users can perform. Ideal for space-sensitive interfaces, they improve the user experience by providing a familiar visual metaphor for a given action. Use Icon Buttons to:

• Represent an action or functionality in a more visual manner.
• Save space when an App Button would clutter the UI.
• Improve the scalability of an interface with familiar icons.

Properties

export type IconButtonType = 'primary' | 'secondary';

export interface IconButtonProps extends ElementProps, TooltipProps {
  icon: IconName;
  disabled?: boolean;
  type?: IconButtonType;
  size?: 'default' | 'tiny';
  textColor?: string;
  pressed?: boolean;
};

Playground

Tooltip

Tooltip Position

Top CenterTop RightTop LeftBottom CenterBottom RightBottom Left

Top Center

Size

DefaultTiny

Default

Type

PrimarySecondary

Primary

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

close

Pressed

Disabled

        
          

            <
            IconButton

            





            

                icon
              
                =
                "close"
              

                type
              
                =
                "primary"
              

                size
              
                =
                "default"
              

                tooltipPosition
              
                =
                "top-center"
              



  />

Anatomy

1. Container: The clickable area that encloses the icon.
2. Icon: the main graphical representation of the functionality of the Icon Button. It should be intuitive and familiar to users. Each icon represents a functionality and may alter the type of Icon Button. Scaled to 20 x 20 px for both Big and Small size variants.

States

Default, Hover, Pressed, Focus and Locked

Variants

Type

• Primary - Adheres to the primary color palette of each brand. Used to maintain brand consistency and emphasize core functionalities related to the brand theme.
• Secondary - Neutral in appearance, these are used for generic or common functions where the brand color is not necessary or could be distracting.

Size

• Default - 36 x 36 px
• Tiny - 20 x 20 px