Parameters and States

Parameters are a block's input values that determine which styles apply. They are declared with the @param directive and control the conditional @if rules. These are the component's "states", only described in the styles rather than in JavaScript.

Declaring parameters

@param is declared at the start of the block body: a name (a CSS variable with a -- prefix), a type, and, if needed, a default value.

@enum Variant {
  values: "primary", "ghost";
}

@block Button {
  @param --variant Variant;       // required
  @param --disabled? boolean;     // optional (the ? sign)
  @param --size? string: "md";    // optional with a default value

  /* styles below */
}

A ? sign after the name makes the parameter optional. Types can be primitive (boolean, string, number, unit, color) or user-defined — @enum enums. See the full list in the Data types section.

The link to the params prop

Each @param becomes a field of the params object on the generated component. The name is converted from --kebab-case to camelCase:

In .ecss	In the component
@param --variant	params.variant
@param --is-active	params.isActive

import { EButton } from './Button.ecss';

<EButton as="button" params={{ variant: 'primary', disabled: true }}>
  Click me
</EButton>;

TypeScript knows the types of all parameters: you can't pass variant: 'danger', which isn't in @enum Variant. If a block has at least one required parameter, the params prop is required; if all parameters are optional, you may omit it.

Conditional styles with @if

Parameters do nothing on their own — they are "read" by the @if / @elseif / @else conditions. This is the mechanism that turns a parameter value into a set of CSS rules:

@block Button {
  @param --variant Variant;
  @param --disabled? boolean;

  display: inline-flex;
  padding: 8px 16px;

  @if (--variant == "primary") {
    background: #646cff;
    color: #fff;
  } @elseif (--variant == "ghost") {
    background: transparent;
    border: 1px solid currentColor;
  }

  @if (--disabled) {
    opacity: 0.4;
    cursor: not-allowed;
  }
}

For a boolean parameter, a bare name is enough (@if (--disabled) is equivalent to --disabled == true). For enums and strings, use the == / != comparison. Conditions can be combined (&&, ||, !) and nested — see the details in the @if reference.

Next steps

• @param — the full parameter reference
• @if / @elseif / @else — all forms of conditions
• Data types — parameter types
• Components and Adapters — how a block becomes a component