Badge Liten sirkel med informasjon om f.eks nye/uleste elementer.

Komponenter

 depentant-attrs lk-anchor-group lk-badge lk-banner lk-bil lk-breadcrumbs lk-button lk-button-link lk-card lk-carousel lk-checkbox lk-checkbox-group lk-cloner lk-details lk-divider lk-dual-listbox lk-error-summary lk-file-uploader lk-filter lk-icon lk-input-block lk-modal lk-page-header lk-pagination lk-radio-group lk-search lk-select-block lk-spinner lk-tag lk-textarea-block lk-to-top Portalheader Portalsøk Seksjonsintro Side footer Skip-link Søkeresultater Tabeller Mindre brukte Aksjonsheader Aksjonsknapp Ansattsøkeresultater Arrangementsliste Artikkelliste Beskrivelsesliste Brukerinfo Coverbilde Fanenavigering Fremhevet artikkel Kalenderhendelser Knappevelger Kontaktseksjon Ledige stillinger lk-cloud-map lk-cover-image lk-feedback lk-figure lk-map lk-message Magasinsidetopp no-opener no-referral Overskrift med ikon Uthevet blokk Uthevet liste Eksperimentell lk-feedback-form lk-file-upload lk-iframe lk-suggestion Avviklet Alarmsignal Ankerlenker Badge Banner Brødsmuler Definere ikoner Ekstern lenke iframe Ikonliste Interaktive skjema elementer Knappegruppe Knapper lk-beep-test lk-details lk-flood-status lk-google-maps lk-google-maps-tile lk-help-text lk-rating lk-read-text lk-select-util lk-show-details lk-show-more lk-site-footer lk-site-header lk-tab-panel Melding Sidetopp Skjemaelementer Sosiale medier Tidslinje Varselboks
deprecated
Badge styling komponent er ikke lengre i bruk. Bytt til lk-badge web-komponenten.

Liten sirkel med informasjon om f.eks nye/uleste elementer.

Badge

Brukes f.eks i notifikasjoner.

Merk at elementet som skal dekoreres med et badge må ha klassen .badge-container satt, eller ha position: relative; i CSS-stylingen.

Classer

Type Value Note
Color --primary, --success, --danger Required
Position --top-left, --top-right, --bottom-left, --bottom-right Required
Inline --inline

Eksempler

Vis kode 

<button class="button badge-container span-third">
  <span class="button__text">Meldinger</span>
  <span class="badge badge--primary badge--top-right">4</span>
</button>
Vis kode 


<div class="grid grid--start-aligned">
  <button class="button button--success badge-container span-third">
    <span class="button__text">Meldinger</span>
    <span class="badge badge--primary badge--top-left">4</span>
  </button>
  <button class="button button--primary badge-container span-third">
    <span class="button__text">Meldinger</span>
    <span class="badge badge--primary badge--bottom-left">4</span>
  </button>
  <button class="button button--danger badge-container span-third">
    <span class="button__text">Meldinger</span>
    <span class="badge badge--primary badge--bottom-right">4</span>
  </button>
  
  <button class="button button--success badge-container span-third">
    <span class="button__text">Meldinger</span>
    <span class="badge badge--success badge--top-right">4</span>
  </button>
  <button class="button button--primary badge-container span-third">
    <span class="button__text">Meldinger</span>
    <span class="badge badge--success badge--top-right">4</span>
  </button>
  <button class="button button--danger badge-container span-third">
    <span class="button__text">Meldinger</span>
    <span class="badge badge--success badge--top-right">4</span>
  </button>

  <button class="button button--success badge-container span-third">
    <span class="button__text">Meldinger</span>
    <span class="badge badge--danger badge--top-right">4</span>
  </button>
  <button class="button button--primary badge-container span-third">
    <span class="button__text">Meldinger</span>
    <span class="badge badge--danger badge--top-right">4</span>
  </button>
  <button class="button button--danger badge-container span-third">
    <span class="button__text">Meldinger</span>
    <span class="badge badge--danger badge--top-right">4</span>
  </button>

</div>