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
Padding in Button Large
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
Padding in Button Medium
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
Padding in Button Small
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.
Primary button in light/dark mode
Secondary
Use secondary for the second-most important actions.
Secondary button in light/dark mode
Tertiary
Use tertiary for the least important actions, and only when secondary is already in use.
Tertiary button in light/dark mode
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.
Spacing between Label and Icon for each size variant
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.
