Dyvix UI

Appearance

Label overrides ​

Label style overrides represent a set of typed CSS Variables that allow easier control for the developer rather than using normal styling.

Usage ​

tsx
<DyvixLabel
  htmlFor="username"
  overrides={{
    '--dyvix-label-color': '#94a3b8',
    '--dyvix-label-font-size': '0.875rem',
    '--dyvix-label-font-weight': '500',
    '--dyvix-label-letter-spacing': '-0.01em',
    '--dyvix-label-hover-color': '#f8fafc',
    '--dyvix-label-display': 'inline-block'
  }}
>
  Username
</DyvixLabel>

Available Overrides ​

  • --dyvix-label-padding: 8px 16px || 10px 22px || 12px 24px || string
  • --dyvix-label-transition: string || none
  • --dyvix-label-color: color
  • --dyvix-label-font-size: 0.875rem || 0.9rem || 1rem || 1.125rem || string
  • --dyvix-label-font-weight: 400 || 500 || 600 || 700 || normal || bold || string
  • --dyvix-label-font-family: Geist || system-ui || monospace || string
  • --dyvix-label-border-radius: 0px || 4px || 6px || 8px || 9999px || string
  • --dyvix-label-border-width: 0px || 1px || 2px || string
  • --dyvix-label-border-style: solid || dashed || dotted || double || string || none
  • --dyvix-label-border-color: color || transparent
  • --dyvix-label-bg: color || transparent || string
  • --dyvix-label-box-shadow: none || inset 0 1px 0 0 rgba(255, 255, 255, 0.05) || string
  • --dyvix-label-letter-spacing: -0.02em || -0.01em || 0em || string
  • --dyvix-label-hover-bg: color || transparent || string
  • --dyvix-label-hover-border-color: color || transparent
  • --dyvix-label-hover-border-width: 0px || 1px || 2px || string
  • --dyvix-label-hover-border-style: solid || dashed || dotted || double || string || none
  • --dyvix-label-hover-border-radius: 0px || 4px || 6px || 8px || 9999px || string
  • --dyvix-label-hover-color: color
  • --dyvix-label-hover-transform: none || translateY(-1px) || translateY(-2px) || scale(1.02) || string
  • --dyvix-label-hover-box-shadow: none || 0 4px 12px rgba(0, 0, 0, 0.5) || string
  • --dyvix-label-width: fit-content || 100% || auto || string
  • --dyvix-label-height: fit-content || 100% || auto || string
  • --dyvix-label-display: inline-block || block || inline-flex || flex || inline || grid || inline-grid || contents || flow-root || list-item || table || inline-table || table-row || table-cell || none || string