LUCI Design System
These Kitchen Sink pages are test pages created in order to preview components without any possible documentation site style collisions.
Primary Button
<button>
Get It Now
<a>
Get It Now
input[type="checkbox"]
Get It Now
input[type="radio"]
Get It Now
<button>
Messages
<a>
See All Topics
input[type="checkbox"]
Download Profile
<button>
Download Profile
<button>
input[type="checkbox"]
States
<button>
Default
<button>
Hover
<button>
Active
<button>
Focus
<button>
Disabled
<a>
Default
<a>
Hover
<a>
Active
<a>
Focus
<a> disabled
Disabled
input[type="checkbox"]
Default
input[type="checkbox"]
Hover
input[type="checkbox"]
Active
input[type="checkbox"]
Checked
input[type="checkbox"]
Focus
input[type="checkbox"]
Disabled
Small Primary Button
<button>
Get It Now
<a>
Get It Now
input[type="checkbox"]
Get It Now
input[type="radio"]
Get It Now
<button>
Messages
<a>
See All Topics
input[type="checkbox"]
Download Profile
<button>
Download Profile
<button>
input[type="checkbox"]
States
<button>
Default
<button>
Hover
<button>
Active
<button>
Focus
<button>
Disabled
<a>
Default
<a>
Hover
<a>
Active
<a>
Focus
<a> disabled
Disabled
input[type="checkbox"]
Default
input[type="checkbox"]
Hover
input[type="checkbox"]
Active
input[type="checkbox"]
Checked
input[type="checkbox"]
Focus
input[type="checkbox"]
Disabled
Primary Button, On Dark
<button>
Get It Now
<a>
Get It Now
input[type="checkbox"]
Get It Now
input[type="radio"]
Get It Now
<button>
Messages
<a>
See All Topics
input[type="checkbox"]
Download Profile
<button>
Download Profile
<button>
input[type="checkbox"]
States
<button>
Default
<button>
Hover
<button>
Active
<button>
Focus
<button>
Disabled
<a>
Default
<a>
Hover
<a>
Active
<a>
Focus
<a> disabled
Disabled
input[type="checkbox"]
Default
input[type="checkbox"]
Hover
input[type="checkbox"]
Active
input[type="checkbox"]
Checked
input[type="checkbox"]
Focus
input[type="checkbox"]
Disabled
Secondary Button
<button>
Get It Now
<a>
Get It Now
input[type="checkbox"]
Get It Now
input[type="radio"]
Get It Now
<button>
Messages
<a>
See All Topics
input[type="checkbox"]
Download Profile
<button>
Download Profile
<button>
input[type="checkbox"]
States
<button>
Default
<button>
Hover
<button>
Active
<button>
Focus
<button>
Disabled
<a>
Default
<a>
Hover
<a>
Active
<a>
Focus
<a> disabled
Disabled
input[type="checkbox"]
Default
input[type="checkbox"]
Hover
input[type="checkbox"]
Active
input[type="checkbox"]
Checked
input[type="checkbox"]
Focus
input[type="checkbox"]
Disabled
Small Secondary Button
<button>
Get It Now
<a>
Get It Now
input[type="checkbox"]
Get It Now
input[type="radio"]
Get It Now
<button>
Messages
<a>
See All Topics
input[type="checkbox"]
Download Profile
<button>
Download Profile
<button>
input[type="checkbox"]
States
<button>
Default
<button>
Hover
<button>
Active
<button>
Focus
<button>
Disabled
<a>
Default
<a>
Hover
<a>
Active
<a>
Focus
<a> disabled
Disabled
input[type="checkbox"]
Default
input[type="checkbox"]
Hover
input[type="checkbox"]
Active
input[type="checkbox"]
Checked
input[type="checkbox"]
Focus
input[type="checkbox"]
Disabled
Flat Button
<button>
Get It Now
<a>
Get It Now
input[type="checkbox"]
Get It Now
input[type="radio"]
Get It Now
<button>
Messages
<a>
See All Topics
input[type="checkbox"]
Download Profile
<button>
Download Profile
<button>
input[type="checkbox"]
States
<button>
Default
<button>
Hover
<button>
Active
<button>
Focus
<button>
Disabled
<a>
Default
<a>
Hover
<a>
Active
<a>
Focus
<a> disabled
Disabled
input[type="checkbox"]
Default
input[type="checkbox"]
Hover
input[type="checkbox"]
Active
input[type="checkbox"]
Checked
input[type="checkbox"]
Focus
input[type="checkbox"]
Disabled
Small Flat Button
<button>
Get It Now
<a>
Get It Now
input[type="checkbox"]
Get It Now
input[type="radio"]
Get It Now
<button>
Messages
<a>
See All Topics
input[type="checkbox"]
Download Profile
<button>
Download Profile
<button>
input[type="checkbox"]
States
<button>
Default
<button>
Hover
<button>
Active
<button>
Focus
<button>
Disabled
<a>
Default
<a>
Hover
<a>
Active
<a>
Focus
<a> disabled
Disabled
input[type="checkbox"]
Default
input[type="checkbox"]
Hover
input[type="checkbox"]
Active
input[type="checkbox"]
Checked
input[type="checkbox"]
Focus
input[type="checkbox"]
Disabled
Icon Only Button
<button>
<a>
input[type="checkbox"]
input[type="radio"]
<button>
Icon Only Button, States
default
hover
active
checked
focus
disabled
Icon Only Button, States - Small
default
hover
active
checked
focus
disabled
Icon Only Button, States, Checkbox
default
hover
active
checked
focus
disabled
Icon Only Button, States, Checkbox - Small
default
hover
active
checked
focus
disabled
Secondary Icon Only, (Flat Button)
<button>
<a>
input[type="checkbox"]
input[type="radio"]
<button>
Secondary Icon Only, (Flat Button), States
default
hover
active
checked
focus
disabled
Secondary Icon Only, (Flat Button), States - Small
default
hover
active
checked
focus
disabled
Secondary Icon Only, (Flat Button), States, Checkbox
default
hover
active
checked
focus
disabled
Secondary Icon Only, (Flat Button), States, Checkbox - Small
default
hover
active
checked
focus
disabled
Too Little Content
a
Too Much Content
Please don't ever put this much text in a button, it's a really bad idea. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis soluta natus, enim sequi temporibus debitis ad eius autem delectus rerum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis soluta natus, enim sequi temporibus debitis ad eius autem delectus rerum.