Skip to main content

Variants

Some components in Atomic Elements have what we call variants. A component variant is a preset configuration of a component that changes it's appearance or behavior in some way. There are two types of variants:

  • Visual Variants only modify the visual presentation for a component via CSS. These can be easily modified / additional ones may be added.
  • Semantic Variants modify the actual structure of a component's markup. These need to be added to the code explicitly. Note that any component that has semantic variants can also have visual variants

Visual Variants​

Visual variants are variants that only modify the visual appearance of a component. For example, the button component has several visual variants built-in that you can use:

<Button variant="primary">primary</Button>
<Button variant="secondary">secondary</Button>
<Button variant="success">success</Button>
<Button variant="error">error</Button>
<Button variant="border">border</Button>
<Button variant="link">link</Button>
<Button variant="ghost">ghost</Button>
<Button variant="inverted">inverted</Button>

Which would render like this:

Creating New Visual Variants​

Variants are implemented using CSS custom properties, so you can easily create new variants by adding new CSS declarations.

.aje-btn--purple {
  --btn-bg-clr: purple;
  --btn-text-clr: white;
  --btn-hover-bg-clr: rgb(179, 13, 179);
  --btn-hover-text-clr: white;
}

And then, you can use it like this:

<Button variant="purple">Purple!</Button>

Modify Built in Variants​

You can also modify the built-in variants if you want different defaults, but you need to be aware of CSS specificity rules to get it to work properly. By default, the selector that applies the styles to each of the variants has higher specificity than just .aje-btn--primary for example. So, you need to make sure your selector is more specific than the built-in one. For example:

/* This won't override the built in styles */
.aje-btn--primary {
  --btn-bg-clr: blue;
  --btn-text-clr: white;
  --btn-hover-bg-clr: rgb(179, 13, 179);
  --btn-hover-text-clr: white;
}

/* This will */
#root .aje-btn--primary {
  --btn-bg-clr: blue;
  --btn-text-clr: white;
  --btn-hover-bg-clr: rgb(179, 13, 179);
  --btn-hover-text-clr: white;
}

Semantic Variants​

Semantic variants are variants that modify the actual structure of a component's markup. For example, the TextInput component has two semantic variants built-in: default and floating. These variants need to be implemented in a component explicitly.


If you're interested in adding a new semantic variant to a component, you can look at the source code for the TextInput component to see how it's done.

The following components have semantic variants built in:

  • TextInput
  • NumberInput
  • SearchInput
  • CustomSelect
  • ComboBox