Buttons
Buttons let people take action and make choices with one tap.
Sizes
Depending on the context and the needs, Buttons have 3 different sizes to be able to accomodate it in every scenario.
Large
Large takes as much width as possible within the container or scaffold where its placed.
It has a 16px radius.
borderRadius: BorderRadius.circular(16),
Padding
Medium
Medium takes half the width of the screen, allowing for another Medium button to be placed next to it in a Row.
It has a radius of 14px.
Padding
Small
Small takes as little width as possible, adapting to its label. It is recommended to keep the label as short and concise as possible, specially in this case.
It has a radius of 8px.
Padding
States
Use states to display the situation of the button in a given context.
Hierarchy
Each button has either primary, secondary, or tertiary emphasis, and the different variants may be used on the same screen to direct user attention.
Primary
Use primary for the most important actions and to command the most attention.
Secondary
Use secondary for the second-most important actions.
Tertiary
Use tertiary for the least important actions, and only when secondary is already in use.
Button with Icon
Buttons can display an Icon if needed. It will be placed right before the Label, to its left, with an spacing of 8px for Large, 6px for Medium and 4px for Small.
Icon also has different sizes depending on the size of the button itself. It will be 24x24px for Large, 20x20px for Medium, and 18x18px for Small.
Last updated