# Component

All button types use fully rounded corners - "make buttons look like buttons"

Be mindful when using icon buttons that the icon has a very specific meaning, i.e. we tend to only use these kind of buttons when there is a clear and obvious action associated with it. For example, the close button used in sheets.

Icon button

Do

  • On all buttons, show visual feedback when a button is interacted with: on hover, on click, on focus
  • Always use a fully rounded button
  • Check colour contrast ratios between background and icon

Don't

  • Don't ignore the minimum button size - customers need to be able to tap on a button

# Elevation and shadows

Elevation styles can be applied to buttons, if you want to give them more prominence. See elevation for more info.

# Button placement

Icon buttons are generally used to represent an action on a screen. They are the close button on sheets and the save for later button PLPs. They are relevant to the screen they are on.

# Structure

Icon buttons should always be the same width and height.

Last Updated: 10/19/2020, 12:13:29 PM