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 button in a disabled state because they all support both enabled and disabled variants. In Adobe XD we are using the Component States paradigm to let you easily switch between them.

    States

    Enabled buttons support Rest and Hover state. In Sketch this is achieved with Symbol Overrides, while in Adobe XD we are using the Component States paradigm to let you easily switch between states.

    Layout Template

    Raised, Outlined, Flat, and Floating Action Buttons support flexible icon and label templates. In Sketch, the smart layout rules applied, allow the layout to adjust accordingly when you set the elements you want to hide to ~No Symbol. In Adobe XD, you achieve the same by deleting the unused layer instead. However, if you only want to change the label and icon position at design time you can simply drag one of them to the other side of the other one.

    Styling

    The Buttons come with styling flexibility through the various options for 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.