3.0.0-alpha.7 Alpha
Default Default Classic Light Dark Light Dark System
Search /
Default Default Classic Light Dark Light Dark System
Style Utilities

Appearance Variants

.wa-accent .wa-outlined .wa-filled .wa-plain

Appearance utilities apply a collection of properties to achieve certain effects, like making elements accented, outlined, filled, or plain.

Some Web Awesome components, like <wa-button>, allow you to change their overall style by using an appearance attribute:

You can create the same effect on any element by using the appearance utility classes:

Using these classes is a two-way handshake: they do not directly apply styles, but define custom properties that you can use in styles that should respond to these utilities:

Then you can use (some of) these properties in any class that should respond to these.

For example, assume we wanted to make a custom .badge class with appearance variants. This is all we need to do:

<small class="badge wa-accent">Accent</small>
<small class="badge wa-outlined">Outlined</small>
<small class="badge wa-filled">Filled</small>
<small class="badge wa-plain">Plain</small>

<style>
  .badge {
	background-color: var(--background-color);
	border: 1px solid var(--border-color);
	color: var(--text-color);
	padding: var(--wa-space-2xs) var(--wa-space-xs);
	border-radius: var(--wa-border-radius-xs);
  }
</style>

With Color Variants

These properties also work well with the color variants utility classes:

<div class="wa-stack">
	<div class="wa-brand">
		<small class="badge wa-accent">Accent</small>
		<small class="badge wa-outlined">Outlined</small>
		<small class="badge wa-filled">Filled</small>
		<small class="badge wa-plain">Plain</small>
	</div>
	<div class="wa-danger">
		<small class="badge wa-accent">Accent</small>
		<small class="badge wa-outlined">Outlined</small>
		<small class="badge wa-filled">Filled</small>
		<small class="badge wa-plain">Plain</small>
	</div>
	<div class="wa-warning">
		<small class="badge wa-accent">Accent</small>
		<small class="badge wa-outlined">Outlined</small>
		<small class="badge wa-filled">Filled</small>
		<small class="badge wa-plain">Plain</small>
	</div>
	<div class="wa-success">
		<small class="badge wa-accent">Accent</small>
		<small class="badge wa-outlined">Outlined</small>
		<small class="badge wa-filled">Filled</small>
		<small class="badge wa-plain">Plain</small>
	</div>
</div>

<style>
  .badge {
	background-color: var(--background-color);
	border: 1px solid var(--border-color);
	color: var(--text-color);
	padding: var(--wa-space-2xs) var(--wa-space-xs);
	border-radius: var(--wa-border-radius-xs);
  }
</style>
    No results