Iconen met labeltekst β
Labeltekst geeft korte en betekenisvolle omschrijvingen wanneer de iconen te abstract zijn. Dit is van bijzondere waarde bij navigatie-elementen.
De horizontale ruimte tussen een icoon en de labeltekst bedraagt standaard 8 px (
cds.sys.spacing.2xs).
Dit geldt voor de standaard icoongrootte (24 x 24 px,cds.sys.dimension.icon.m) en de tekstgrootte (label-large).De verticale ruimte tussen een icoon en de labeltekst bedraagt standaard 4 px (
cds.sys.spacing.3xs).
Dit geldt voor de standaard icoongrootte (24 x 24 px,cds.sys.dimension.icon.m) en de tekstgrootte (label-medium).Bij grotere iconen (vanaf 40 x 40 px,
cds.sys.dimension.icon.xl) hoort ook grotere tekst (headline-small) en een grotere tussenruimte van 16 px (cds.sys.spacing.s) om de balans te behouden.
![]()
zie ook: ruimte > relaties
Aanbevolen:
Voor iconen die voor navigatie worden gebruikt, is het belangrijk om een label toe te voegen zodat de functie van het icoon direct duidelijk is.
Let op:
Als iconen zonder labels worden weergegeven, moet de betekenis ervan onmiskenbaar en toegankelijk zijn voor alle gebruikers. Labels mogen alleen in uitzonderlijke gevallen worden weggelaten als dit noodzakelijk is voor een verminderde visuele impact.