Label Component

<cv-label> cv-label

Labels are small inline pill badges you can place anywhere in your content. They are meant to be used with adaptations, with no user interaction, no settings modal entry, no persistence. The color is derived from the config, and the displayed text is derived from either the config or the element's own inner content.

Usage

Add the (Optional) Label Configuration

Labels are defined in custardui.config.json under the labels key. It supports 3 fields: name, value, and color. Only name is required — value and color are both optional.

{
  "config": {
    "labels": [
      { "name": "exercise-1", "value": "OPTIONAL", "color": "#3b82f6" },
      { "name": "exercise-2", "value": "OPTIONAL", "color": "#3b82f6" },
      { "name": "exercise-3", "value": "OPTIONAL", "color": "#3b82f6" },
      { "name": "exercise-4", "value": "OPTIONAL", "color": "#3b82f6" }
    ]
  }
}

    

    Copy
    

    


    
    
    
    

    Wrap Text
    

    


    
    
    

Place Labels in Content

Use <cv-label name="..."> anywhere in your page. The text inside the element acts as the default value and the fallback. You can also set a color directly on the element as a default.

• If the label has a corresponding entry with the same name in the config, the value and color in the config will override the (text) value and color in the element.
• If the label has no entry in the config, it will use the inner text as the value and the color attribute as the color. If no color attribute is set, it will use default gray (#6b7280).
• If there is no text inside the element and no value is defined for that label in the config, it will render nothing.

This step is <cv-label name="optional" color="#3b82f6">OPTIONAL</cv-label> for beginners.

Read the <cv-label name="key" color="#ef4444">★ KEY</cv-label> sections first.

Check the <cv-label name="warning" color="#f59e0b">⚠ WARNING</cv-label> boxes carefully.

This is an <cv-label name="advanced" color="#8b5cf6">ADVANCED</cv-label> topic.

    

    Copy
    

    


    
    
    
    

    Wrap Text
    

    


    
    
    

Label Configuration

Shorthand Colors

The color field (both in config and on the element attribute) accepts single-letter shorthands as a convenience. Each shorthand has a light and dark variant — which one is used depends on the colorScheme setting in custardui.config.json (default: "light").

Text color (black or white) is still auto-computed for contrast against the resolved background.

<!-- Shorthand in the element attribute -->
<cv-label name="opt" color="b">OPTIONAL</cv-label>

<!-- Shorthand in config -->
{ "name": "optional", "color": "b" }

    

    Copy
    

    


    
    
    
    

    Wrap Text
    

    


    
    
    

<cv-label name="sampleColor" color="r">r</cv-label>
<cv-label name="sampleColor" color="g">g</cv-label>
<cv-label name="sampleColor" color="b">b</cv-label>
<cv-label name="sampleColor" color="c">c</cv-label>
<cv-label name="sampleColor" color="m">m</cv-label>
<cv-label name="sampleColor" color="y">y</cv-label>
<cv-label name="sampleColor" color="w">w</cv-label>
<cv-label name="sampleColor" color="k">k</cv-label>

    

    Copy
    

    


    
    
    
    

    Wrap Text
    

    


    
    
    

Adaptation Overrides

Labels can be overridden per adaptation via preset.labels. This lets different adaptations show different labels — for example, marking a step as "COMPULSORY" in red for one audience while keeping it "OPTIONAL" in blue for others:

{
  "id": "sample",
  "preset": {
    "labels": {
      "exercise-1": { "value": "COMPULSORY", "color": "#ef4444" },
      "exercise-2": { "value": "COMPULSORY", "color": "#ef4444" }
    }
  }
}

    

    Copy
    

    


    
    
    
    

    Wrap Text
    

    


    
    
    

Live Demo

Switch adaptation: Sample Adaptation. Click here to reset Adaptation

Exercise 1 is <cv-label name="exercise-1">OPTIONAL</cv-label>.

Exercise 2 is <cv-label name="exercise-2">OPTIONAL</cv-label>.

Exercise 3 is <cv-label name="exercise-3">OPTIONAL</cv-label>.

Exercise 4 is <cv-label name="exercise-4">OPTIONAL</cv-label>.

    

    Copy
    

    


    
    
    
    

    Wrap Text
    

    


    
    
    

By default all four render as blue OPTIONAL pills. After clicking Sample, the preset.labels in sample.json overrides them to red COMPULSORY pills. Click Reset to clear the adaptation and return to defaults.

Labels are not user-settable and are never included in shareable URLs or localStorage.