# Button

Component name: <v-button>

# Examples

# Primary buttons

Preview

Code

Primary button Primary button (inverted)

Disabled button Disabled inverted button

# Secondary buttons (deprecated)

Deprecated

Preview

Code

Secondary button Secondary button (inverted)

# Link buttons

Preview

Code

Primary button Link button

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales, nibh eget venenatis vulputate, magna nisi tempus mi, nec congue ante lectus sed purus. Mauris consequat iaculis feugiat. Integer scelerisque condimentum urna, eu suscipit velit. In id nibh enim.

Link button with icon

# Loading state

Preview

Code

Save changes

# Automatic icons

Preview

Code

Sekundær knap Mit arkiv

Notice

If a url provided as href contains the query parameter SC_LOCKED the item will be styled as locked.
If target="_blank" has been provided the item will be styled as an external link.

# Change sizes

Preview

Code

Small Medium large

# Change underlying element (tag)

Preview

Code

I'm a link to 3f I'm also a link-tag

# Corner button example

Info

Find the <v-corner-button> example on the v-modal component page

# API

Name	Type	Description	Default
tag	String	Change the underlying DOM element	a
primary	Boolean	Primary variant	true
secondary	Boolean	Secondary variant (Deprecated)	false
link	Boolean	Link variant	false
link-icon	Boolean	Link variant with icon	false
small	Boolean	Small size	false
medium	Boolean	Medium size	true
large	Boolean	Large size	false
inverted	Boolean	Inverted variant	false
loading	Boolean	Show loading indicator	false
go-back	Boolean	Act as the browser back button. Use `href` attribute to provide a fallback URL in case there is no browser history.	false

General notice

All other properties that are not defined above, will be passed to the component as html attributes. This is especially useful for adding the class attribute.

← Announce Byline →