Appearance

Icon Label ​

A presentation component for displaying text adjacent to an icon.

Basic Usage ​

NYC Natural Remedies
template
<IconLabel icon="building-office">
  NYC Natural Remedies
</IconLabel>
Download
template
<IconLabel icon="file" href="#">
  Download
</IconLabel>
Settings
template
<IconLabel icon="gear" to="#">
  Settings
</IconLabel>

INFO

router-link does not currently get rendered down in Vitepress; as a result, this example does not render a link as expected.

Stacked ​

An icon label can stack the icon above the label, horizontally centered.

Credit Card
template
<IconLabel icon="credit-card" stacked>
  Credit Card
</IconLabel>

Custom colors ​

An icon label can accept a color for styling an icon.

Orange Dashboard
Red Circle Close
Seafoam Compass
Blue Document
Green Check
Teal Calendar
template
<IconLabel icon="dashboard" color="orange-500">
  Orange Dashboard
</IconLabel>

<IconLabel icon="circle-close" color="red-500">
  Red Circle Close
</IconLabel>

<IconLabel icon="compass" color="seafoam-500">
  Seafoam Compass
</IconLabel>

<IconLabel icon="document" color="blue-500">
  Blue Document
</IconLabel>

<IconLabel icon="check" color="green-500">
  Green Check
</IconLabel>

<IconLabel icon="calendar" color="teal-500">
  Teal Calendar
</IconLabel>

Status Indicators ​

Active
Pending
Delivered
Errored
template
<IconLabel icon="status" color="green-500">
  Active
</IconLabel>

<IconLabel icon="status" color="yellow-500">
  Pending
</IconLabel>

<IconLabel icon="status" color="green-500">
  Delivered
</IconLabel>

<IconLabel icon="status" color="red-500">
  Errored
</IconLabel>

Truncate label ​

Optionally truncate overflowing text with an ellipsis when unable to wrap

template
<IconLabel icon="envelope" href="#" truncate>
  some.really.really.really.long@emailaddress.com
</IconLabel>

API ​

See the documentation below for a complete reference to all the props and classes available to the components mentioned here.