nve-button

Selveste NVE-knappen. Bruk href for å gjøre den om til en link. Disse feltene skal ikke brukes: circle, caret og pill

Arvet fra: SlButton

<nve-button>NVE-knappen</nve-button>

Eksempler

Varianter

Bruk variant for å velge farge. default er standard. success og warning skal ikke brukes.

<nve-button>default</nve-button>
<nve-button variant="primary">primary</nve-button>
<nve-button variant="secondary">secondary</nve-button>
<nve-button variant="neutral">neutral</nve-button>
<nve-button variant="text">text</nve-button>
<nve-button variant="danger">danger</nve-button>

Størrelse

Bruk size for å endre størrelse. large er standard.

<nve-button size="small">small</nve-button>
<nve-button size="medium">medium</nve-button>
<nve-button>large</nve-button>

Disabled

Bruk disabled for å deaktivere knappen.

<nve-button disabled>deaktivert</nve-button> <nve-button>ikke deaktivert</nve-button>

Loading

Bruk loading for å legge til ei snurre.

<nve-button loading>loading</nve-button>

Spor

Navn	Beskrivelse
(standard)	The button's label.
prefix	A presentational prefix icon or similar element.
suffix	A presentational suffix icon or similar element.

Hendelser

Navn	Arvet fra	Beskrivelse
sl-blur	SlButton	Emitted when the button loses focus.
sl-focus	SlButton	Emitted when the button gains focus.
sl-invalid	SlButton	Emitted when the form control has been checked for validity and its constraints aren't satisfied.

Egenskaper

Navn	Attributt-synk	Type	Standardverdi	Arvet fra	Beskrivelse
size		'small' | 'medium' | 'large'	'large'
testId		string	''
button		HTMLButtonElement | HTMLLinkElement		SlButton
invalid		boolean	false	SlButton
title		string	''	SlButton
variant		'default' | 'primary' | 'success' | 'neutral' | 'warning' | 'danger' | 'text'	'default'	SlButton	The button's theme variant.
caret		boolean	false	SlButton	Draws the button with a caret. Used to indicate that the button triggers a dropdown menu or similar behavior.
disabled		boolean	false	SlButton	Disables the button.
loading		boolean	false	SlButton	Draws the button in a loading state.
outline		boolean	false	SlButton	Draws an outlined button.
pill		boolean	false	SlButton	Draws a pill-style button with rounded edges.
circle		boolean	false	SlButton	Draws a circular icon button. When this attribute is present, the button expects a single `<sl-icon>` in the default slot.
type		'button' | 'submit' | 'reset'	'button'	SlButton	The type of button. Note that the default value is `button` instead of `submit`, which is opposite of how native `<button>` elements behave. When the type is `submit`, the button will submit the surrounding form.
name		string	''	SlButton	The name of the button, submitted as a name/value pair with form data, but only when this button is the submitter. This attribute is ignored when `href` is present.
value		string	''	SlButton	The value of the button, submitted as a pair with the button's name as part of the form data, but only when this button is the submitter. This attribute is ignored when `href` is present.
href		string	''	SlButton	When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`.
target		'_blank' | '_parent' | '_self' | '_top'		SlButton	Tells the browser where to open the link. Only used when `href` is present.
rel		string	'noreferrer noopener'	SlButton	When using `href`, this attribute will map to the underlying link's `rel` attribute. Unlike regular links, the default is `noreferrer noopener` to prevent security exploits. However, if you're using `target` to point to a specific tab/window, this will prevent that from working correctly. You can remove or change the default value by setting the attribute to an empty string or a value of your choice, respectively.
download		string | undefined		SlButton	Tells the browser to download the linked file as this filename. Only used when `href` is present.
form		string		SlButton	The "form owner" to associate the button with. If omitted, the closest containing form will be used instead. The value of this attribute must be an id of a form in the same document or shadow root as the button.
formAction		string		SlButton	Used to override the form owner's `action` attribute.
formEnctype		'application/x-www-form-urlencoded' | 'multipart/form-data' | 'text/plain'		SlButton	Used to override the form owner's `enctype` attribute.
formMethod		'post' | 'get'		SlButton	Used to override the form owner's `method` attribute.
formNoValidate		boolean		SlButton	Used to override the form owner's `novalidate` attribute.
formTarget		'_self' | '_blank' | '_parent' | '_top' | string		SlButton	Used to override the form owner's `target` attribute.
validity				SlButton	Gets the validity state object
validationMessage				SlButton	Gets the validation message

Metoder

Navn	Parametre	Returtype	Arvet fra	Beskrivelse
handleDisabledChange			SlButton
click			SlButton	Simulates a click on the button.
focus	options: FocusOptions		SlButton	Sets focus on the button.
blur			SlButton	Removes focus from the button.
checkValidity			SlButton	Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.
getForm		HTMLFormElement | null	SlButton	Gets the associated form, if one exists.
reportValidity			SlButton	Checks for validity and shows the browser's validation message if the control is invalid.
setCustomValidity	message: string		SlButton	Sets a custom validation message. Pass an empty string to restore validity.

Deler

Navn	Beskrivelse
base	The component's base wrapper.
prefix	The container that wraps the prefix.
label	The button's label.
suffix	The container that wraps the suffix.
caret	The button's caret icon, an `<sl-icon>` element.
spinner	The spinner that shows when the button is in the loading state.