Visual Tests

With so many ways to build with and use Web Awesome components, visual tests help ensure consistency and prevent broken styles from leaking into production.

These tests can come in handy when creating or customizing your own theme. Look through each test case to make sure that custom styles in your theme cover all of the attributes, utilities, and built-in styles Web Awesome offers.

Native

Color

Size

Alignment

Harmony

Alignment

Link to This Section

Alignment tests reveal the top boundary, vertical center, and bottom boundary of components. These help to evaluate how well components align with one another when arranged horizontally.

    Switch
    Checkbox
    Radio
  
    Switch
    Checkbox
    Radio
  
    Switch
    Checkbox
    Radio
  
    Switch
    Checkbox
    Radio
  
    Switch
    Checkbox
    Radio
  
      Option
    
    Button
  
      Option
    
    Button
  
      Option
    
    Button
  
      Option
    
    Button
  
      Option
    
    Button
  
    Badge
    Code
    Keyboard
    Inserted
    Deleted
    Highlighted

<style>
  div.alignment {
    background: linear-gradient(to bottom, lightblue, lightblue 1px, transparent 1px, transparent), linear-gradient(to top, lightblue, lightblue 1px, transparent 1px, transparent);
    position: relative;
    display: flex;
    gap: 1rem;
    align-items: center;
  }
  div.alignment::after {
    content: '';
    position: absolute;
    top: calc(50% - 0.5px);
    width: 100%;
    height: 1px;
    background-color: red;
  }
</style>
<div class="wa-stack wa-gap-xl">
  <div class="alignment">
    <wa-switch size="xs">Switch</wa-switch>
    <wa-checkbox size="xs">Checkbox</wa-checkbox>
    <wa-radio value="1" size="xs">Radio</wa-radio>
  </div>
  <div class="alignment">
    <wa-switch size="s">Switch</wa-switch>
    <wa-checkbox size="s">Checkbox</wa-checkbox>
    <wa-radio value="1" size="s">Radio</wa-radio>
  </div>
  <div class="alignment">
    <wa-switch>Switch</wa-switch>
    <wa-checkbox>Checkbox</wa-checkbox>
    <wa-radio value="1">Radio</wa-radio>
  </div>
  <div class="alignment">
    <wa-switch size="l">Switch</wa-switch>
    <wa-checkbox size="l">Checkbox</wa-checkbox>
    <wa-radio value="1" size="l">Radio</wa-radio>
  </div>
  <div class="alignment">
    <wa-switch size="xl">Switch</wa-switch>
    <wa-checkbox size="xl">Checkbox</wa-checkbox>
    <wa-radio value="1" size="xl">Radio</wa-radio>
  </div>
  <div class="alignment">
    <wa-textarea placeholder="textarea" size="xs" rows="1"></wa-textarea>
    <wa-input placeholder="input" size="xs"></wa-input>
    <wa-select size="xs" value="1" multiple>
      <wa-option value="1">Option</wa-option>
    </wa-select>
    <wa-color-picker size="xs"></wa-color-picker>
    <wa-button size="xs">Button</wa-button>
  </div>
  <div class="alignment">
    <wa-textarea placeholder="textarea" size="s" rows="1"></wa-textarea>
    <wa-input placeholder="input" size="s"></wa-input>
    <wa-select size="s" value="1" multiple>
      <wa-option value="1">Option</wa-option>
    </wa-select>
    <wa-color-picker size="s"></wa-color-picker>
    <wa-button size="s">Button</wa-button>
  </div>
  <div class="alignment">
    <wa-textarea placeholder="textarea" size="m" rows="1"></wa-textarea>
    <wa-input placeholder="input" size="m"></wa-input>
    <wa-select size="m" value="1" multiple>
      <wa-option value="1">Option</wa-option>
    </wa-select>
    <wa-color-picker size="m"></wa-color-picker>
    <wa-button size="m">Button</wa-button>
  </div>
  <div class="alignment">
    <wa-textarea placeholder="textarea" size="l" rows="1"></wa-textarea>
    <wa-input placeholder="input" size="l"></wa-input>
    <wa-select size="l" value="1" multiple>
      <wa-option value="1">Option</wa-option>
    </wa-select>
    <wa-color-picker size="l"></wa-color-picker>
    <wa-button size="l">Button</wa-button>
  </div>
  <div class="alignment">
    <wa-textarea placeholder="textarea" size="xl" rows="1"></wa-textarea>
    <wa-input placeholder="input" size="xl"></wa-input>
    <wa-select size="xl" value="1" multiple>
      <wa-option value="1">Option</wa-option>
    </wa-select>
    <wa-color-picker size="xl"></wa-color-picker>
    <wa-button size="xl">Button</wa-button>
  </div>
  <div class="alignment">
    <wa-badge>Badge</wa-badge>
    <code>Code</code>
    <kbd>Keyboard</kbd>
    <ins>Inserted</ins>
    <del>Deleted</del>
    <mark>Highlighted</mark>
  </div>
  <div class="alignment">
    <wa-avatar></wa-avatar>
    <wa-rating></wa-rating>
    <wa-button appearance="plain">
      <wa-icon name="gear" label="Settings"></wa-icon>
    </wa-button>
    <wa-spinner></wa-spinner>
  </div>
</div>

Color

Link to This Section

Color tests ensure that both the variant attribute and .wa-[variant] classes have identical results for components that support them. Developers should be able to use both of these interchangeably to give the component the intended semantic color.

Badge

Link to This Section

	`variant=""`	`.wa-[variant]`
`brand`	Accent Filled-Outlined Filled Outlined	Accent Filled-Outlined Filled Outlined
`neutral`	Accent Filled-Outlined Filled Outlined	Accent Filled-Outlined Filled Outlined
`success`	Accent Filled-Outlined Filled Outlined	Accent Filled-Outlined Filled Outlined
`warning`	Accent Filled-Outlined Filled Outlined	Accent Filled-Outlined Filled Outlined
`danger`	Accent Filled-Outlined Filled Outlined	Accent Filled-Outlined Filled Outlined

Button

Link to This Section

	`variant=""`	`.wa-[variant]`
`brand`	Accent Filled-Outlined Filled Outlined Plain	Accent Filled-Outlined Filled Outlined Plain
`neutral`	Accent Filled-Outlined Filled Outlined Plain	Accent Filled-Outlined Filled Outlined Plain
`success`	Accent Filled-Outlined Filled Outlined Plain	Accent Filled-Outlined Filled Outlined Plain
`warning`	Accent Filled-Outlined Filled Outlined Plain	Accent Filled-Outlined Filled Outlined Plain
`danger`	Accent Filled-Outlined Filled Outlined Plain	Accent Filled-Outlined Filled Outlined Plain

Callout

Link to This Section

	`variant=""`	`.wa-[variant]`
`brand`	Accent Filled-Outlined Filled Outlined Plain	Accent Filled-Outlined Filled Outlined Plain
`neutral`	Accent Filled-Outlined Filled Outlined Plain	Accent Filled-Outlined Filled Outlined Plain
`success`	Accent Filled-Outlined Filled Outlined Plain	Accent Filled-Outlined Filled Outlined Plain
`warning`	Accent Filled-Outlined Filled Outlined Plain	Accent Filled-Outlined Filled Outlined Plain
`danger`	Accent Filled-Outlined Filled Outlined Plain	Accent Filled-Outlined Filled Outlined Plain

Tag

Link to This Section

	`variant=""`	`.wa-[variant]`
`brand`	Accent Filled-Outlined Filled Outlined	Accent Filled-Outlined Filled Outlined
`neutral`	Accent Filled-Outlined Filled Outlined	Accent Filled-Outlined Filled Outlined
`success`	Accent Filled-Outlined Filled Outlined	Accent Filled-Outlined Filled Outlined
`warning`	Accent Filled-Outlined Filled Outlined	Accent Filled-Outlined Filled Outlined
`danger`	Accent Filled-Outlined Filled Outlined	Accent Filled-Outlined Filled Outlined

Harmony

Link to This Section

Harmony tests show how related components look together. These can help validate design choices or reveal where design intervention is needed to get a consistent, harmonious look and feel.

Form Controls

Link to This Section

                  
    Option 1
    Option 2
    Option 3
  
    Option 1
    Option 2
    Option 3
  
  Checkbox
  Switch
  
  Button

<form class="wa-stack">
  <wa-input label="Input" placeholder="Placeholder"></wa-input>
  <wa-select label="Select" value="option-1">
    <wa-option value="option-1">Option 1</wa-option>
    <wa-option value="option-2">Option 2</wa-option>
    <wa-option value="option-3">Option 3</wa-option>
  </wa-select>
  <wa-textarea label="Textarea" placeholder="Placeholder"></wa-textarea>
  <wa-radio-group label="Radio group" name="a" value="1">
    <wa-radio value="1">Option 1</wa-radio>
    <wa-radio value="2">Option 2</wa-radio>
    <wa-radio value="3">Option 3</wa-radio>
  </wa-radio-group>
  <wa-checkbox>Checkbox</wa-checkbox>
  <wa-switch>Switch</wa-switch>
  <wa-slider label="Range"></wa-slider>
  <wa-button>Button</wa-button>
</form>

Progress

Link to This Section

<div class="wa-stack">
  <wa-progress-bar value="50" max="100"></wa-progress-bar>
  <wa-progress-ring value="50" max="100"></wa-progress-ring>
  <wa-spinner></wa-spinner>
</div>

Native

Link to This Section

Native style tests ensure that supported native elements and utilities look the same as their Web Awesome component counterparts. Native elements may also support the same appearance, color, and size utilities as components.

Button

Link to This Section

	`<wa-button>`	`<button>`
default	Button
`accent`	Brand Neutral Success Warning Danger
`filled-outlined`	Brand Neutral Success Warning Danger
`filled`	Brand Neutral Success Warning Danger
`outlined`	Brand Neutral Success Warning Danger
`plain`	Brand Neutral Success Warning Danger
`s`	Small
`m`	Medium
`l`	Large
`pill`	Pill

Checkbox

Link to This Section

	`<wa-checkbox>`	`<input type="checkbox">`
default	Checkbox	Checkbox
`checked`	Checkbox	Checkbox

Color Picker

Link to This Section

	`<wa-color-picker>`	`<input type="color">`
default		Color Picker

Details

Link to This Section

	`<wa-details>`	`<details>`
default	Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.	Summary Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
`dir="rtl"`	استخدام طريقة لوريم إيبسوم لأنها تعطي توزيعاَ طبيعياَ -إلى حد ما- للأحرف عوضاً عن	تبديلني استخدام طريقة لوريم إيبسوم لأنها تعطي توزيعاَ طبيعياَ -إلى حد ما- للأحرف عوضاً عن

Input

Link to This Section

	`<wa-input>`	`<input>`
default		Input
`type="password"`		Input (password)
`type="date"`		Input (date)
`type="time"`		Input (time)
`filled`		Input (filled)
`s`		Input (small)
`m`		Input (medium)
`l`		Input (large)

Progress Bar

Link to This Section

	`<wa-progress-bar>`	`<progress>`
default

Radio

Link to This Section

	`<wa-radio>`	`<input type="radio">`
default	Radio	Radio
`checked`	Radio	Radio

Select

Link to This Section

	`<wa-select>`	`<select>`
default	Option	Select
`filled`	Option	Select (filled)
`s`	Option	Select (small)
`m`	Option	Select (medium)
`l`	Option	Select (large)

Slider

Link to This Section

	`<wa-slider>`	`<input type="range">`
default		Slider

Textarea

Link to This Section

	`<wa-textarea>`	`<textarea>`
default		Textarea
`filled`		Textarea (filled)
`s`		Textarea (small)
`m`		Textarea (medium)
`l`		Textarea (large)

Size

Link to This Section

Size tests ensure that both the size attribute and .wa-size-[xs|s|m|l|xl] classes have identical results for components that support them. Developers should be able to use both of these interchangeably on components to get the intended size.

Button

Link to This Section

	`size=""`	`.wa-size-[xs\|s\|m\|l\|xl]`
`xs`	Button	Button
`s`	Button	Button
`m`	Button	Button
`l`	Button	Button
`xl`	Button	Button

Callout

Link to This Section

	`size=""`	`.wa-size-[xs\|s\|m\|l\|xl]`
`xs`	Callout	Callout
`s`	Callout	Callout
`m`	Callout	Callout
`l`	Callout	Callout
`xl`	Callout	Callout

Checkbox

Link to This Section

	`size=""`	`.wa-size-[xs\|s\|m\|l\|xl]`
`xs`	Checkbox	Checkbox
`s`	Checkbox	Checkbox
`m`	Checkbox	Checkbox
`l`	Checkbox	Checkbox
`xl`	Checkbox	Checkbox

Color Picker

Link to This Section

	`size=""`	`.wa-size-[xs\|s\|m\|l\|xl]`
`xs`
`s`
`m`
`l`
`xl`

Link to This Section

	`size=""`	`.wa-size-[xs\|s\|m\|l\|xl]`
`xs`	Dropdown Menu Item 1 Menu Item 2	Dropdown Menu Item 1 Menu Item 2
`s`	Dropdown Menu Item 1 Menu Item 2	Dropdown Menu Item 1 Menu Item 2
`m`	Dropdown Menu Item 1 Menu Item 2	Dropdown Menu Item 1 Menu Item 2
`l`	Dropdown Menu Item 1 Menu Item 2	Dropdown Menu Item 1 Menu Item 2
`xl`	Dropdown Menu Item 1 Menu Item 2	Dropdown Menu Item 1 Menu Item 2

Input

Link to This Section

	`size=""`	`.wa-size-[xs\|s\|m\|l\|xl]`
`xs`
`s`
`m`
`l`
`xl`

Radio

Link to This Section

	`size=""`	`.wa-size-[xs\|s\|m\|l\|xl]`
`xs`	Radio	Radio
`s`	Radio	Radio
`m`	Radio	Radio
`l`	Radio	Radio
`xl`	Radio	Radio

Radio Button

Link to This Section

	`size=""`	`.wa-size-[xs\|s\|m\|l\|xl]`
`xs`	Radio Button	Radio Button
`s`	Radio Button	Radio Button
`m`	Radio Button	Radio Button
`l`	Radio Button	Radio Button
`xl`	Radio Button	Radio Button

Radio Group

Link to This Section

	`size=""`	`.wa-size-[xs\|s\|m\|l\|xl]`
`xs`	Radio 1 Radio 2 Radio 1 Radio 2	Radio 1 Radio 2 Radio 1 Radio 2
`s`	Radio 1 Radio 2 Radio 1 Radio 2	Radio 1 Radio 2 Radio 1 Radio 2
`m`	Radio 1 Radio 2 Radio 1 Radio 2	Radio 1 Radio 2 Radio 1 Radio 2
`l`	Radio 1 Radio 2 Radio 1 Radio 2	Radio 1 Radio 2 Radio 1 Radio 2
`xl`	Radio 1 Radio 2 Radio 1 Radio 2	Radio 1 Radio 2 Radio 1 Radio 2

Rating

Link to This Section

	`size=""`	`.wa-size-[xs\|s\|m\|l\|xl]`
`xs`
`s`
`m`
`l`
`xl`

Select

Link to This Section

	`size=""`	`.wa-size-[xs\|s\|m\|l\|xl]`
`xs`	Option	Option
`s`	Option	Option
`m`	Option	Option
`l`	Option	Option
`xl`	Option	Option

Switch

Link to This Section

	`size=""`	`.wa-size-[xs\|s\|m\|l\|xl]`
`xs`	Switch	Switch
`s`	Switch	Switch
`m`	Switch	Switch
`l`	Switch	Switch
`xl`	Switch	Switch

Textarea

Link to This Section

	`size=""`	`.wa-size-[xs\|s\|m\|l\|xl]`
`xs`
`s`
`m`
`l`
`xl`

Getting Started

Resources

Theming & Utilities

Components

Data Visualization Pro Data Visualization components require access to Web Awesome Pro

Form Controls

Utility Components

Legal Stuff

Web Awesome

Web Awesome Elsewhere

Visual Tests

Alignment

Color

Badge

Button

Callout

Tag

Harmony

Form Controls

Progress

Native

Button

Checkbox

Color Picker

Details

Input

Progress Bar

Radio

Select

Slider

Textarea

Size

Button

Callout

Checkbox

Color Picker

Dropdown

Input

Radio

Radio Button

Radio Group

Rating

Select

Switch

Textarea