Buttons & Links

Default button

Button with extra attributes

Sizes

Themes

Shapes

Links

As we iterate through all of the button sizes and add an icon for each of their available sizes, you will notice that at a certain point, the icon size begins to dictate the size of the button. This is expected and acceptable. We are in control of the configured sizes so can tweak them as required. The user should be aware of this nuance and set both sizes to achieve their goal (don't put an "xxl" icon in a "sm" button and expect it to be the same size as an "sm" button with no icon!)

XS button

Sign in with Microsoft (No icon) Sign in with Microsoft (xxs icon) Sign in with Microsoft (xs icon) Sign in with Microsoft (sm icon) Sign in with Microsoft (md icon) Sign in with Microsoft (lg icon) Sign in with Microsoft (xl icon) Sign in with Microsoft (xxl icon)

SM button

Sign in with Microsoft (No icon) Sign in with Microsoft (xxs icon) Sign in with Microsoft (xs icon) Sign in with Microsoft (sm icon) Sign in with Microsoft (md icon) Sign in with Microsoft (lg icon) Sign in with Microsoft (xl icon) Sign in with Microsoft (xxl icon)

MD button

Sign in with Microsoft (No icon) Sign in with Microsoft (xxs icon) Sign in with Microsoft (xs icon) Sign in with Microsoft (sm icon) Sign in with Microsoft (md icon) Sign in with Microsoft (lg icon) Sign in with Microsoft (xl icon) Sign in with Microsoft (xxl icon)

LG button

Sign in with Microsoft (No icon) Sign in with Microsoft (xxs icon) Sign in with Microsoft (xs icon) Sign in with Microsoft (sm icon) Sign in with Microsoft (md icon) Sign in with Microsoft (lg icon) Sign in with Microsoft (xl icon) Sign in with Microsoft (xxl icon)

XL button

Sign in with Microsoft (No icon) Sign in with Microsoft (xxs icon) Sign in with Microsoft (xs icon) Sign in with Microsoft (sm icon) Sign in with Microsoft (md icon) Sign in with Microsoft (lg icon) Sign in with Microsoft (xl icon) Sign in with Microsoft (xxl icon)