Skip to main content

InfoLine Component

infoLine renders a compact icon and value, typically for phone, email, vehicle, or container details. An empty value renders nothing.

component: infoLine
props:
icon: tabler-phone
value: '{{ row.record.phoneNumber }}'
href: 'tel:{{ row.record.phoneNumber }}'
truncate: true

iconColor controls the icon color. href creates a link only for http:, https:, tel:, mailto:, /, and ~/ targets; unsafe schemes fall back to plain text. truncate adds ellipsis with a full-value tooltip. Set variant: chip for a bordered chip appearance. tooltip and onClick are supported, and link clicks do not bubble to the component action.