Violin.css

# Label: Default

Ready

- HTML
- View
- Context
- Assets
- Info
- Notes

`

    <label for="" class="inv-label ">
      Input label
      <span></span>
    </label>

`
`

    <label for="{{label.for}}" class="inv-label {{label.modifier}}">
      {{label.value}}
      <span>{{label.posfix}}</span>
    </label>

`
`

    {
      "label": {
        "value": "Input label"
      }
    }

`
File:

- Content:
  `

      .inv-label {
        color: var(--color-system--dark);
        font-size: 14px;
        font-weight: 600;
        text-align: left;
        padding-bottom: 3px;
      }

      .inv-label--disabled {
        color: var(--color-default--regular);
        cursor: not-allowed;
      }

      .inv-label > span {
        color: var(--color-default--regular);
        font-size: 12px;
        font-style: italic;
      }

  `
- URL: /components/raw/label/label.css
- Filesystem Path: src/components/label/label.css
- Size: 326 Bytes

- Handle: @label--default
- Variants (3): Default , Required , Disable
- Preview:
  - With layout
  - Component only
- Filesystem Path: src/components/label/label.hbs
- Referenced by (10): @form-field, @form-field--icon, @form-field--progress, @form-field--error, @form-field--disabled, @input-file, @input-file--file-selected, @input-file--input-file-disabled, @input-file--input-file-required, @input-file--input-file-error

## Labels

Utilizadas nos campos de input

Tendo a classe base `.inv-label`, podendo ser adicionado um texto através de uma `span`

### Default Label

Label padrão, comum para ações regulares dos usuários.

`

    <label for="" class="inv-label">Default</label>
    <label for="" class="inv-label">
      Default
      <span>- obrigatório</span>
    </label>

`

Modificadores | Uso
--- | ---
`.inv-button--disabled` | Modifica a label com estilização de desabilitado

### Disabled label

Versão desabilitada.

`

    <label for="" class="inv-label inv-label--disabled">
      Label
      <span>- desabilitada</span>
    </label>

`