@if / @elseif / @else

The @if, @elseif, and @else directives apply CSS rules depending on the values of block parameters. They are used only inside a @block body.

Syntax

@if (condition) {
  /* ... */
}

@elseif (condition) {
  /* ... */
}

@else {
  /* ... */
}

@elseif and @else are optional. @elseif may appear any number of times; @else only once and always last in the chain.

Conditions

Boolean parameter

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

The shorthand form is equivalent to --disabled == true. Negation is done with !:

@if (!--disabled) {
  cursor: pointer;
}

Comparing values

@if (--variant == "primary") {
  background: #646cff;
}

@if (--status != "error") {
  border-color: transparent;
}

Comparing against @const

A @const can be used in a condition — for example, to compare a parameter against a constant:

@const --brand color: #646cff;

@block Button {
  @param --color? color;

  @if (--color == --brand) {
    font-weight: 600;
  }
}

Optional parameter and null

An optional parameter without a value equals null. This can be checked explicitly or via the shorthand form:

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

@block Tag {
  @param --variant? Variant;

  @if (--variant == null) {
    background: #f0f0f0; // value not passed
  }

  @if (!--variant) {
    border: 1px solid #ccc; // equivalent to == null
  }
}

Logical operators

@if (--expanded && --theme == "dark") {
  background: #121212;
}

@if (--expanded || --pinned) {
  box-shadow: 0 4px 12px rgb(0 0 0 / 0.15);
}

Grouping

@if ((--variant == "primary" || --variant == "danger") && --disabled) {
  opacity: 0.3;
}

@elseif / @else chain

@elseif adds an alternative condition — its body applies if the previous conditions did not hold. @else defines the default branch, which applies when none of the conditions matched:

@if (--status == "idle") {
  background: #f0f0f0;
  color: #555;
}

@elseif (--status == "loading") {
  background: #e0f0ff;
  color: #0055cc;
}

@elseif (--status == "error") {
  background: #ffe0e0;
  color: #cc0000;
}

@else {
  background: #e0ffe0;
  color: #006600;
}

@else can also be used without @elseif:

@if (--active) {
  color: #646cff;
}

@else {
  color: #999;
}

Nested conditions

@if blocks can be nested to any depth:

@block Panel {
  @param --expanded boolean;
  @param --theme string;
  @param --pinned boolean;

  @if (--expanded) {
    max-height: 1000px;

    @if (--theme == "dark") {
      background: #121212;

      @if (--pinned) {
        border: 2px solid #0077ff;
      }
    }
  }
}

@if with @element

Inside @if, @element can be used for conditional styles of nested elements:

@block Button {
  @param --active boolean;

  @element Icon {
    color: gray;
  }

  @if (--active) {
    @element Icon {
      color: #646cff;
    }
  }
}

Example

@enum Status {
  values: "idle", "loading", "error", "success";
}

@block Badge {
  @param --status Status;
  @param --outlined? boolean: false;

  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 9999px;
  font-size: 12px;

  @if (--outlined) {
    border: 1px solid currentColor;
    background: transparent;
  }

  @if (--status == "idle") {
    color: #555;
    background: #f0f0f0;
  }

  @elseif (--status == "loading") {
    color: #0055cc;
    background: #e0f0ff;
  }

  @elseif (--status == "error") {
    color: #cc0000;
    background: #ffe0e0;
  }

  @else {
    color: #006600;
    background: #e0ffe0;
  }
}

See also

• @param — parameters used in conditions
• @const — constants used in conditions
• @element — conditional styles of nested elements
• @block — the block inside which conditions are used