Buttons

The buttons communicate actions that users can perform. They are generally positioned in your user interface, in places like:

  • Modals
  • Forms
  • Cards
  • Toolbars

  • Imports


    Filled button

    The complete buttons are of high importance, distinguished by their use of elevation and infill. They include actions that are primal to your application.


    Outlined button

    The underlined buttons are moderate accented buttons. They contain actions that are significant but are not the primary action within an application.


    Icon button

    The icon buttons are generally located in the appbar and toolbar of the applications. Icon buttonsare also appropriate for toggle buttons that allow you to select or deselect a single selection, such as adding or deleting a star to an element.

    These icon buttons can also be use as a Floating Action Button

    Buttons with icons and label

    Sometimes you might want to have icons for certain buttons to enhance the application's UX as we recognize the logos more easily than simple text. For example, if you have a remove button, you can label it with a trash can icon.

    We don't have any additional classes to implement this feature, just add your icon before or after the button text and you are ready to go.

    Link buttons

    Links are accessible elements used primarily for navigation. This component is styled to resemble a hyperlink.