Note: Sink pages like this one are unpolished test files.

Return to Guideline

Buttons Sink

Legacy Button Markup (here to ensure styles still work with legacy button markup) - Deprecate in 3.0.0

Button Markup is only changing for input element buttons and buttons with text and icons.

Element Type Consistency

The following confirms that regardless of the element used to create the button, it will look visually identical. Tests: <button>, <a>, input[type="checkbox|radio"]. When you scan each row, every element should look identical.

Primary

Click Me

Primary, Left Icon

Add User

Primary, Right Icon

Continue

Primary, Two Icons

Profile

Primary, Icon Only

false

Primary, Small

Click Me

Primary, Small, Left Icon

Add User

Primary, Small, Right Icon

Continue

Primary, Small, Two Icons

Profile

Primary, Small, Icon Only

false

Secondary

Click Me

Secondary, Left Icon

Add User

Secondary, Right Icon

Continue

Secondary, Two Icons

Profile

Secondary, Icon Only

false

Secondary, Small

Click Me

Secondary, Small, Left Icon

Add User

Secondary, Small, Right Icon

Continue

Secondary, Small, Two Icons

Profile

Secondary, Small, Icon Only

false

Ghost

Click Me

Ghost, Left Icon

Add User

Ghost, Right Icon

Continue

Ghost, Two Icons

Profile

Ghost, Icon Only

false

Ghost, Small

Click Me

Ghost, Small, Left Icon

Add User

Ghost, Small, Right Icon

Continue

Ghost, Small, Two Icons

Profile

Ghost, Small, Icon Only

false

Ghost, Dark Background

Click Me

Ghost, Dark Background, Left Icon

Add User

Ghost, Dark Background, Right Icon

Continue

Ghost, Dark Background, Two Icons

Profile

Ghost, Dark Background, Icon Only

false

Ghost, Dark Background, Small

Click Me

Ghost, Dark Background, Small, Left Icon

Add User

Ghost, Dark Background, Small, Right Icon

Continue

Ghost, Dark Background, Small, Two Icons

Profile

Ghost, Dark Background, Small, Icon Only

false

Flat

Click Me

Flat, Left Icon

Add User

Flat, Right Icon

Continue

Flat, Two Icons

Profile

Flat, Icon Only

false

Flat, Small

Click Me

Flat, Small, Left Icon

Add User

Flat, Small, Right Icon

Continue

Flat, Small, Two Icons

Profile

Flat, Small, Icon Only

false

Flat, Dark Background

Click Me

Flat, Dark Background, Left Icon

Add User

Flat, Dark Background, Right Icon

Continue

Flat, Dark Background, Two Icons

Profile

Flat, Dark Background, Icon Only

false

Flat, Small, Dark Background

Click Me

Flat, Small, Dark Background, Left Icon

Add User

Flat, Small, Dark Background, Right Icon

Continue

Flat, Small, Dark Background, Two Icons

Profile

Flat, Small, Dark Background, Icon Only

false

Vertical Alignment of Content

The following confirms that buttons will be correctly vertically aligned in relation to one another regardless of whether they contain text, icons, a combination of text and icons, or use the small variation.

When you scan each row, every element should have the same height

Primary

el="a"

Click Me
Add User
Continue
Profile
false

el="button"

el="checkbox"

el="radio"

Primary, Small

el="a"

Click Me
Add User
Continue
Profile
false

el="button"

el="checkbox"

el="radio"

Secondary

el="a"

Click Me
Add User
Continue
Profile
false

el="button"

el="checkbox"

el="radio"

Secondary, Small

el="a"

Click Me
Add User
Continue
Profile
false

el="button"

el="checkbox"

el="radio"

Ghost

el="a"

Click Me
Add User
Continue
Profile
false

el="button"

el="checkbox"

el="radio"

Ghost, Small

el="a"

Click Me
Add User
Continue
Profile
false

el="button"

el="checkbox"

el="radio"

Ghost, Dark Background

el="a"

Click Me
Add User
Continue
Profile
false

el="button"

el="checkbox"

el="radio"

Ghost, Dark Background, Small

el="a"

Click Me
Add User
Continue
Profile
false

el="button"

el="checkbox"

el="radio"

Flat

el="a"

Click Me
Add User
Continue
Profile
false

el="button"

el="checkbox"

el="radio"

Flat, Small

el="a"

Click Me
Add User
Continue
Profile
false

el="button"

el="checkbox"

el="radio"

Flat, Dark Background

el="a"

Click Me
Add User
Continue
Profile
false

el="button"

el="checkbox"

el="radio"

Flat, Small, Dark Background

el="a"

Click Me
Add User
Continue
Profile
false

el="button"

el="checkbox"

el="radio"

Button States

Primary

el="a"

Click Me
Click Me
Click Me
Click Me


Add User
Add User
Add User
Add User


Continue
Continue
Continue
Continue


Profile
Profile
Profile
Profile


false
false
false
false


el="button"











el="checkbox"











el="radio"











Primary, Small

el="a"

Click Me
Click Me
Click Me
Click Me


Add User
Add User
Add User
Add User


Continue
Continue
Continue
Continue


Profile
Profile
Profile
Profile


false
false
false
false


el="button"











el="checkbox"











el="radio"











Secondary

el="a"

Click Me
Click Me
Click Me
Click Me


Add User
Add User
Add User
Add User


Continue
Continue
Continue
Continue


Profile
Profile
Profile
Profile


false
false
false
false


el="button"











el="checkbox"











el="radio"











Secondary, Small

el="a"

Click Me
Click Me
Click Me
Click Me


Add User
Add User
Add User
Add User


Continue
Continue
Continue
Continue


Profile
Profile
Profile
Profile


false
false
false
false


el="button"