Button

Use the Button Component to represent the trigger for a simple action that user can take. Buttons are used in cards, dialogs, forms, and many other components and patterns. The Button is visually identical to the Ignite UI for Angular Button Component

Button Demo

Type

Five types of Buttons are supported:

  • A more prominent Raised Button with color fill and shadow that emphasizes an action.
  • A less prominent Outlined Button with color outline appropriate for the majority of actions.
  • A very subtle Flat Button that is typically used for the least important actions.
  • An Icon Button for actions that are represented only with an icon.
  • A very prominent Floating Action Button (fab) with color fill and shadow that is used once per screen to strongly emphasize the main action.

Interaction States

You may also insert each of these buttons in a disabled state because they all support both enabled and disabled variants.

States

Enabled buttons support Rest and Hover state.

Layout Template

Raised, Outlined, Flat and Floating Action Buttons support flexible icon and label templating achievable by setting the elements you want to hide to ~No Symbol from the overrides panel.

Styling

The Buttons come with styling flexibility through the various overrides controlling the background, label, and icon colors.

Usage

When the content of a Button contains a label, it must be uppercase and with a thicker (usually Medium or Semi-bold) font treatment. When more than one Button is needed for a layout, size them with equal height and arrange them on the same horizontal plane next to each other with sufficient space on both sides to avoid erroneous taps and clicks. In such layouts, avoid combining the different types of buttons. Preferably, you'll want to choose one and use it consistently for all actions that belong in that section of the UI.

Do Don't

Additional Resources

Related topics:

Our community is active and always welcoming to new ideas.