Basisweergave

button

Visuele weergave:

HTML-voorbeeld:

<button>Lorem ipsum</button>

button uitgeschakeld

Visuele weergave:

HTML-voorbeeld:

<button disabled>button primary</button>

input type="button"

Visuele weergave:

HTML-voorbeeld:

<input type="button" value="Lorem ipsum">

input type="button" uitgeschakeld

Visuele weergave:

HTML-voorbeeld:

<input type="button" value="Lorem ipsum" disabled>

Bijbehorende bestanden

Voor meer informatie over importeren en instellen van componenten. Zie: Componenten gebruiken en styling toevoegen

Import scss-file

@import button-base;

Import via npm-package

@use "@minvws/manon/button-base";

Instelbare variabelen

Instelbare variabelen tabel:
Naam Variabele CSS-attribuut Manon ingestelde waarde
--button-base-flex --button-base-flex display inline-flex
--button-base-gap --button-base-gap gap 0.5rem
--button-base-padding-top --button-base-padding-top padding-top 0.25rem
--button-base-padding-right --button-base-padding-right padding-right 1rem
--button-base-padding-bottom --button-base-padding-bottom padding-bottom 0.25rem
--button-base-padding-left --button-base-padding-left padding-left 1rem
--button-base-justify-content --button-base-justify-content justify-content center
--button-base-min-width --button-base-min-width min-width 8rem
--button-base-min-height --button-base-min-height min-height 2.75rem
--button-base-background-color --button-base-background-color background-color var(--application-base-accent-color)
--button-base-text-color --button-base-text-color color var(--application-base-accent-color-text-color)
--button-base-border-width --button-base-border-width border-width none
--button-base-border-style --button-base-border-style border-style unset
--button-base-border-color --button-base-border-color border-color transparent
--button-base-font-size --button-base-font-size font-size var(--application-base-font-size)
--button-base-line-height --button-base-line-height line-height var(--application-base-line-height)
--button-base-font-weight --button-base-font-weight font-weight var(--application-base-font-weight)
--button-base-text-decoration --button-base-text-decoration text-decoration none
--button-base-border-radius --button-base-border-radius border-radius var(--application-base-border-radius)