JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 2591
  • Score
    100M100P100Q121748F
  • License EUPL-1.2

Map control button component for the Municipality of Utrecht based on the NL Design System architecture

Package Exports

  • @utrecht/map-control-button-css
  • @utrecht/map-control-button-css/dist/index.css

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@utrecht/map-control-button-css) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Button

Tekstbutton

Tekstlinks zijn standaard donkerblauw (#2A5587) en onderstreept. In sommige gevallen zijn tekstlinks zwart of wit. Dit geldt bij teksten op een gekleurde achtergrond, waar blauw niet voldoende contrast biedt. Kijk voor meer informatie over de contrastrichtlijnen bij kleuren (link naar kleuren).

Voorbeeld

U kunt tegelijk een paspoort en een ID-kaart hebben. Met een paspoort kunt u naar alle landen reizen. Een ID-kaart is goedkoper, maar u kunt hiermee niet naar alle landen reizen.

Button met pijl

Links met een pijl als voorloopteken worden gebruikt aan het einde van een tekst. Ze verwijzen naar gerelateerde informatie over het onderwerp wat er in de voorafgaande tekst is besproken. De links zijn donkerblauw (#2A5587), bold en hebben een pijl (>) als voorloopteken. Dit type link wordt ook gebruikt in de linklijst en de subnavigatie.

Terminologie

  • button: van het <button> HTML element, role="button" in ARIA.

States

  • hover
  • focus
  • disabled

Class names

  • .utrecht-button
  • .utrecht-button--focus
  • .utrecht-button--hover
  • .utrecht-button--disabled

Design tokens

  • Button
    • --utrecht-button-border-radius
    • --utrecht-button-border-width
    • --utrecht-button-hover-scale
    • --utrecht-button-font-size
    • --utrecht-button-margin-block-start
    • --utrecht-button-margin-block-end
    • --utrecht-button-margin-inline-start
    • --utrecht-button-margin-inline-end
    • --utrecht-button-padding-block-start
    • --utrecht-button-padding-block-end
    • --utrecht-button-padding-inline-start
    • --utrecht-button-padding-inline-end
    • Modifier: primary action
      • --utrecht-button-primary-action-background-color
      • --utrecht-button-primary-action-color
      • --utrecht-button-primary-action-hover-background-color
    • Modifier: disabled
      • --utrecht-button-disabled-background-color
      • --utrecht-button-disabled-color