Shared vocabulary

Most components in the library don't invent their own vocabulary for color, surface, or size. Instead, they reuse one of a handful of shared choices that mean the same thing everywhere they appear. Once "critical" or "outline" makes sense on one component, it makes sense on every other one that offers it too, so this page walks through each choice on its own, separately from any single component's page.

Three attributes never overlap. color picks the hue. appearance paints the surface (background, border, shadow), with the same meaning on every component. variant changes what is drawn, such as a loader's dots or bar, a skeleton's shape or a stepper's layout, with values that only mean something on that one component, which is why it isn't covered here.

Color

An interactive element, one you click to do something, picks a color that signals what kind of action it is: primary for the main choice in a section, secondary for a supporting or cancel action next to it, critical for something destructive, success for a positive confirmation, and warning for something that deserves a second look before continuing. It's set through color, the same attribute as the plain palette below.

Primary

Secondary

Critical

Success

Warning

<eun-button>Primary</eun-button>
<eun-button color="secondary">Secondary</eun-button>
<eun-button color="critical">Critical</eun-button>
<eun-button color="success">Success</eun-button>
<eun-button color="warning">Warning</eun-button>

Used by Button, Fab, Badge, Dropdown button, and Toggle, plus Modal's own confirm button.

Palette

Outside actions, color is a plain, non-semantic palette pick, for something like a category label or a plan tier that carries no status of its own: primary and secondary follow the active theme's brand colors, while light, medium, and dark are a plain neutral scale of increasing weight.

Primary

Secondary

Light

Medium

Dark

<eun-tag color="primary">Primary</eun-tag>
<eun-tag color="secondary">Secondary</eun-tag>
<eun-tag color="light">Light</eun-tag>
<eun-tag color="medium">Medium</eun-tag>
<eun-tag color="dark">Dark</eun-tag>

Used by Tag, Chip, and Tooltip.

Severity

Where an action color says "this button does something risky", severity says "this message matters in a particular way": info for a neutral notice, success for a confirmation, warning for something that deserves caution, critical for a real problem, and neutral for a message with no particular urgency at all.

A neutral notice, nothing urgent.

Something completed the way it should.

Worth a second look before continuing.

Something went wrong and needs attention.

<eun-alert severity="info" heading="Info">
  <p slot="description" style="margin: 0; padding: 0;">
    A neutral notice, nothing urgent.
  </p>
</eun-alert>
<eun-alert severity="success" heading="Success">
  <p slot="description" style="margin: 0; padding: 0;">
    Something completed the way it should.
  </p>
</eun-alert>
<eun-alert severity="warning" heading="Warning">
  <p slot="description" style="margin: 0; padding: 0;">
    Worth a second look before continuing.
  </p>
</eun-alert>
<eun-alert severity="critical" heading="Critical">
  <p slot="description" style="margin: 0; padding: 0;">
    Something went wrong and needs attention.
  </p>
</eun-alert>

Used by Alert, Toast, Tag, Chip, Progress bar, Tooltip, and Dropdown button (to pick its leading icon).

Appearance

Appearance changes how solid or subtle a surface looks, independent of its color: fill is a solid, opaque background; default is a pale tinted wash, spelled soft on buttons, whose default is fill; outline keeps just a border; flat is a muted, low-emphasis surface meant to stay in the background; raised adds a drop shadow; and ghost, reserved for actions, stays invisible until hovered or focused. Two more belong to a single family: underline for form fields (see below) and transparent, a see-through version of the pale tint, for scheduler event chips. No component uses them all: each picks whichever subset actually fits what it is.

Fill

Soft

Outline

Raised

Flat

Ghost

<eun-button appearance="fill">Fill</eun-button>
<eun-button appearance="soft">Soft</eun-button>
<eun-button appearance="outline">Outline</eun-button>
<eun-button appearance="raised">Raised</eun-button>
<eun-button appearance="flat">Flat</eun-button>
<eun-button appearance="ghost">Ghost</eun-button>

Used by Button, Alert, Toast, Tooltip, Card, Tag, Chip, Toggle, every form field, and Scheduler event.

Form fields

A text field uses three appearances, independent of color: outline (the default) draws a bordered box, flat swaps the border for a muted background, the same flat as everywhere else, and underline, a field's own look, keeps only a line beneath the field, the lightest-weight of the three.

<eun-input
  label="Outline"
  appearance="outline"
  placeholder="Bordered box"
></eun-input>
<eun-input
  label="Flat"
  appearance="flat"
  placeholder="Muted background"
></eun-input>
<eun-input
  label="Underline"
  appearance="underline"
  placeholder="Bottom border only"
></eun-input>

Used by Input, Select, Textarea, Date picker, Time picker, Search, Input phone, Counter, and Color picker.

Size

A shared five-step scale, from xs (extra small) to xl (extra large), with m as the middle, default step. Small, compact components only ever offer the three or four sizes that actually read as different at that scale, rather than the full five.

<eun-badge size="s">S</eun-badge>
<eun-badge size="m">M</eun-badge>
<eun-badge size="l">L</eun-badge>

Used by Button, Fab, Badge, Dropdown button, Tag, Chip, Icon, Toggle group, and the text fields (Input, Search, Select, Input phone, Date picker, Time picker and Color picker). A field, a toggle group and a button of the same size have the same height, so they line up side by side.

Guidance

Reuse the value that already matches what you mean: a destructive action and a critical alert should both be critical, not one critical and the other a custom red
Pick action color and severity by what actually happened, not by which one looks nicest in the layout
Reach for color/tone only when nothing is being confirmed, warned about, or gone wrong, just a label with no status

Overriding a color with an inline style instead of picking the right value, or a theme token if none fits (see Theming)
Mixing severities and action colors as if they were interchangeable: an info button and a neutral button don't exist, since neither describes an action's own consequence