Label
Displays a label for a form input, with optional icons for different states.
Install
Run the following command to install the label component:
npx acc-nuxt add LabelExamples
Default
Default Slot
With Tooltip
Important
Success
Loading
Combined States
Slots
The label component provides the following slots for customization.
#default
Slot for rendering custom label content as an alternative to the label prop.
#icon
Slot for rendering custom icons next to the label text.
#loading
Slot for customizing the loading indicator when the label is in a loading state.
Props
label:string— optional
default:undefined
The label text. Either provide this prop or use the default slot for custom content.
name:string— optional
default:undefined
The name of the label.
tooltip:string— optional
default:undefined
The tooltip text.
important:boolean— optional
default:false
When true, the label is marked as important.
success:boolean— optional
default:false
When true, the label is marked as successful.
loading:boolean— optional
default:false
When true, the label is marked as loading.
CSS Variables
The label component can be customized using the following CSS variables.
--lev-label-display
default:inline-flex
Display property of the label.
--lev-label-align-items
default:center
Align items property of the label.
--lev-label-gap
default:12px
Gap between label text and icons.