Note: interactive states only appear when the user interacts with the button, they are not styles that are available for use.

Regular States

Primary button Primary button (disabled) Secondary button Secondary button (disabled) Text button Text button (disabled)

Interactive States

Primary button (focus) Primary button (hover) Primary button (active) Secondary button (focus) Secondary button (hover) Secondary button (active) Text button (focus) Text button (hover) Text button (active)