Datum

Statusstable
Published4.13.0

If you need to show a small fragment of information, without necessarily grabbing anyone's attention but being ready to go when needed, use a Datum — a single, happy data point.

  • Do not confuse with Callout, which presents a suggestion or option.
  • Do not confuse with Terminology, which presents an explanation to a term or state in the system.
  • Do not confused with Spotlight, which wants to draw attention to itself, and is far more user-friendly with its clear labels and space for actions.

Datums tell, not explain.

Datum components support an icon. This acts as a shortcut when representing a state or value, but, as they do not have an explicit label, only use a datum when the value would make sense in isolation to the end user. Otherwise, consider other components, such as a Breakdown, Spotlight or Table.

It also supports a popup slot, if you need to show additional information on request. Users cannot interact with this popup, so don't put any buttons or links in there. This must be used exclusively for auxiliary information that is non-critical, used only as supplementary knowledge, or can be accessed elsewhere. Do not over-rely on datum popups to convey key information.

In addition, since they tend to be quite small, datums themselves have exaggerated hitboxes — this prevents their use inline in text.

14
<jds-datum icon="view">
    14
    <template #popup>
        14 people are watching this recruitment.
    </template>
</jds-datum>

JdsDatum

Props

PropValueDefault
iconstringnone

Slots

Slot
default
popup

Changelog

JOBILLA DESIGN SYSTEM