The page navigation is complete. You may now navigate the page content as you wish.
Skip to main content

Links and buttons

A link if it goes somewhere, a button if it does something — and what our elements render for each.

There is one rule, and everything else follows from it:

  • A link if it goes somewhere. It changes the address. It renders <a href>. Middle-click opens it in a tab, right-click copies the address, hovering shows where it goes, and the browser remembers it was visited.
  • A button if it does something. It changes state on the page you are already on, or submits a form. It renders <button>. Space activates it as well as Enter.

Getting this wrong is not a styling problem; it removes behaviour people rely on. A "link" that is really a button cannot be opened in a new tab. A "button" that is really a link cannot be copied or bookmarked.

A button

Without an href, every interactive element we ship renders a real <button type="button">:

Save Duplicate Delete Publish 
<i80-button color="primary">Save</i80-button>
<i80-button color="secondary" icon="duplicate">Duplicate</i80-button>
<i80-button color="critical" icon="trash">Delete</i80-button>
<i80-button color="primary" type="submit">Publish</i80-button>

Use type="submit" to submit the form it is in, or write your own <button> inside <i80-button> and it is kept as it is, with its type, name, value and event handlers — which is what makes a server-rendered form work before any JavaScript has run.

Add href and the same element renders an <a> instead:

All plans All plans

Every plan has an owner. 

<i80-button href="/plans" icon="arrow-right" icon-position="trailing">All plans</i80-button>
<i80-link-standalone href="/plans" icon="arrow-left">All plans</i80-link-standalone>
<p class="i80-typography-body-200 i80-foreground-primary">
  Every plan has an <i80-link-inline href="/plans">owner</i80-link-inline>.
</p>

An internal address is just an address. There is no routing layer to configure: write the path your server serves.

Add external alongside href and the element sets target="_blank" and rel="noopener noreferrer" on the <a> — the second part matters, because without it the page you opened can reach back into yours.

MDN

Read the anchor element reference first.

Or email us — another protocol, so no new tab. 

<i80-button href="https://developer.mozilla.org" external icon="external-link" icon-position="trailing" color="secondary">
  MDN
</i80-button>
<p class="i80-typography-body-200 i80-foreground-primary">
  Read the <i80-link-inline href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a" external icon="external-link">anchor element reference</i80-link-inline> first.
</p>
<p class="i80-typography-body-200 i80-foreground-primary">
  Or <i80-link-inline href="mailto:support@i80.dk">email us</i80-link-inline> — another protocol, so no new tab.
</p>

Accessibility alert

A link that opens a new tab should say so. Give it the external-link icon, as above, or put it in the text; opening a tab with no warning is a failure of WCAG Success Criterion 3.2.5 Change on Request.

Leave external off for an internal address, and for any other protocol — mailto:, tel:, ftp: — where a new tab makes no sense.

Which element

You want Use
An action, or a link that looks like an action Button
A link on a line of its own Standalone link
A link inside a sentence Inline link
A menu of actions or links Dropdown
The trail to this page Breadcrumb
Page numbers Pagination
A label that filters or navigates Tag

Attributes

href and external behave the same way on every element that can be either — <i80-button>, <i80-link-standalone>, <i80-link-inline>, <i80-tag>, <i80-crumb> and <i80-dropdown-item>. The other two apply to the button.

Attribute Values Default Notes
href URL Renders an <a href> instead of a <button>. Any address: a path, a full URL, mailto:, tel:.
external boolean With href: adds target="_blank" and rel="noopener noreferrer".
type button · submit · reset button On the <button> the element creates. submit submits the surrounding form.
disabled boolean On a button only. A link cannot be disabled; render plain text instead — see Show, hide, and disable.

A native <a>, <button> or <form> you write inside the tag is kept as it is, with its attributes and its handlers, so a server-rendered form or link works before i80.js has loaded. See Web Components for loading it.

0.1.0

Første i80-version (fork af upstream, se core/UPSTREAM.md).

Related

On this page: