Button3.0
Ads by Tryg Careers
Installation
npm i @tryg/vue-ui-libraryUsage
Install the component library as a Vue plugin. This globally registers all Anchor components.
import { createApp } from 'vue';
import { ComponentLibrary } from '@tryg/vue-ui-library';
import App from './App.vue';
const app = createApp(App);
app.use(ComponentLibrary);
app.mount('#app');<template>
<anchor-button text="anchor button" variant="primary"></anchor-button>
</template>Import only the components you need for optimal bundle size.
<script setup>
import { AnchorButton } from '@tryg/vue-ui-library';
</script>
<template>
<anchor-button text="anchor button" variant="primary"></anchor-button>
</template>Variants
Pass the variant prop to display the desired button variant.
<script setup>
import { AnchorButton } from '@tryg/vue-ui-library';
</script>
<template>
<anchor-button variant="primary" text="anchor button"></anchor-button>
<anchor-button variant="secondary" text="anchor button"></anchor-button>
<anchor-button variant="secondary-filled" text="anchor button"></anchor-button>
<anchor-button variant="tertiary" text="anchor button"></anchor-button>
</template>Disabled
Pass the disabled prop to display disabled state of button.
<script setup>
import { AnchorButton } from '@tryg/vue-ui-library';
</script>
<template>
<anchor-button disabled text="anchor button" variant="primary"></anchor-button>
</template>Loading
Pass the loading prop to display a Spinner component inside the button.
<script setup>
import { AnchorButton } from '@tryg/vue-ui-library';
</script>
<template>
<anchor-button loading text="anchor button" variant="primary"></anchor-button>
</template>Icon
You can add icons to the anchor-button by passing the icon prop and adjust its position with icon-placement prop.
<script setup>
import { AnchorButton } from '@tryg/vue-ui-library';
</script>
<template>
<anchor-button icon="chevron-right" icon-placement="right" text="anchor button" variant="primary"></anchor-button>
</template>Accessibility
- Button has role of
button. - Keyboard event support for Space and Enter keys.
- Mouse and touch event handling, and press state management.
- Keyboard focus management and cross browser normalization.
We recommend to read this blog post about the complexities of building buttons that work well across devices and interaction methods.
CSS variables
With CSS variables you can easily customize parts of the Button component. See the table below for a list of available variables.
Button width and height
Previous versions of the Anchor Button has a fixed width of 200px. Now the Button is fully responsive and will grow with it's content by default. This can easily be overwritten by using the CSS variable, for instance like this:
A custom width:
anchor-button {
--button-width: 300px;
}Full width:
anchor-button {
--button-width: 100%;
}Note that this only works with a width of 100% at the moment.
A width declared in percentage of anything less than 100 will not achieve the desired result. Please use a container element or set a specific width in pixels if 100% is not what is needed.
The height of the button is set to be 48px if the base font-size is 16px. This is because we want the Button to match the height of the Input field by default.
If you wish to keep the Button at a height of 40px, like in previous iterations, you can do this with the --line-height variable.
Total height of 40px:
anchor-button {
--button-line-height: 1rem;
}Gap between icon and text
In previous versions of the Button, you could set the gap between icon and text with a prop.
To simplify the interface of the Button, this functionality is now only available as a CSS variable.
Example:
anchor-button {
--button-gap-icon-text: [your value];
}Handling click events
Handle clicks using Vue's event handling syntax:
<script setup>
import { ref } from 'vue';
import { AnchorButton } from '@tryg/vue-ui-library';
// Using a ref:
const buttonRef = ref(null);
function handleClick(e) {
console.log('clicked my button:', e);
}
// Or inline:
function handleInlineClick() {
console.log('inline event');
}
</script>
<template>
<anchor-button ref="buttonRef" text="anchor button" variant="primary" @click="handleClick"></anchor-button>
<anchor-button text="anchor button" variant="primary" @click="handleInlineClick"></anchor-button>
</template>Notes
Please note that in order to support partner styling the buttons font-family is inherited. So if you are using a button inside an element with a custom font-style you need to specifically set the button font-family to it's proper value.
API
Button
Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
disabled | disabled | Set whether or not the button should be disabled NB! This should be rarely be used as it's a potential accessibility issue. Disabled buttons are ignored by screen readers and keyboard navigation. | boolean | false |
download | download | This attribute instructs browsers to download a URL instead of navigating to it, so the user will be prompted to save it as a local file. If the attribute has a value, it is used as the pre-filled file name in the Save prompt (the user can still change the file name if they want). Documentation | string | undefined |
href | href | Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered. Documentation | string | undefined |
icon | icon | Set an icon to be displayed on the button | "activity" | "airplay" | "alarm" | "alert-circle" | "alert-octagon" | "alert-triangle" | "align-center" | "align-justify" | "align-left" | "align-right" | "anchor" | "aperture" | "archive" | "arrow-down" | "arrow-down-circle" | "arrow-down-left" | "arrow-down-right" | "arrow-left" | "arrow-left-circle" | "arrow-right" | "arrow-right-circle" | "arrow-up" | "arrow-up-circle" | "arrow-up-left" | "arrow-up-right" | "at-sign" | "award" | "band-aid" | "bar-chart" | "bar-chart-2" | "basket" | "battery" | "battery-charging" | "bell" | "bell-off" | "bluetooth" | "bold" | "bonus-tryghedsgruppen" | "book" | "book-open" | "bookmark" | "box" | "briefcase" | "calculator" | "calendar" | "camera" | "camera-off" | "cast" | "check" | "check-circle" | "check-square" | "chevron-down" | "chevron-left" | "chevron-right" | "chevron-up" | "chevrons-down" | "chevrons-left" | "chevrons-right" | "chevrons-up" | "child" | "chrome" | "circle" | "clipboard" | "clock" | "cloud" | "cloud-drizzle" | "cloud-lightning" | "cloud-off" | "cloud-rain" | "cloud-snow" | "code" | "codepen" | "codesandbox" | "coffee" | "columns" | "command" | "company" | "compass" | "copy" | "corner-down-left" | "corner-down-right" | "corner-left-down" | "corner-left-up" | "corner-right-down" | "corner-right-up" | "corner-up-left" | "corner-up-right" | "cpu" | "credit-card" | "crop" | "crosshair" | "database" | "delete" | "disc" | "divide" | "divide-circle" | "divide-square" | "dollar-sign" | "download" | "download-cloud" | "dribbble" | "droplet" | "edit" | "edit-2" | "edit-3" | "external-link" | "eye" | "eye-off" | "facebook" | "fast-forward" | "feather" | "figma" | "file" | "file-minus" | "file-pdf" | "file-plus" | "file-text" | "film" | "filter" | "flag" | "folder" | "folder-minus" | "folder-plus" | "framer" | "frown" | "gift" | "git-branch" | "git-commit" | "git-merge" | "git-pull-request" | "github" | "gitlab" | "globe" | "grid" | "hard-drive" | "hash" | "headphones" | "heart" | "help-circle" | "hexagon" | "home" | "image" | "inbox" | "info" | "instagram" | "italic" | "key" | "layers" | "layout" | "life-buoy" | "link" | "link-2" | "linkedin" | "list" | "loader" | "lock" | "log-in" | "log-out" | "mail" | "map" | "map-pin" | "maximize" | "maximize-2" | "megaphone" | "meh" | "menu" | "message-circle" | "message-square" | "mic" | "mic-off" | "minimize" | "minimize-2" | "minus" | "minus-circle" | "minus-square" | "monitor" | "moon" | "more-horizontal" | "more-vertical" | "mouse-pointer" | "move" | "music" | "navigation" | "navigation-2" | "octagon" | "offer" | "package" | "paperclip" | "pause" | "pause-circle" | "pen-tool" | "percent" | "phone" | "phone-call" | "phone-forwarded" | "phone-incoming" | "phone-missed" | "phone-off" | "phone-outgoing" | "pie-chart" | "play" | "play-circle" | "plus" | "plus-circle" | "plus-square" | "pocket" | "power" | "printer" | "radio" | "refresh-ccw" | "refresh-cw" | "repeat" | "rewind" | "rotate-ccw" | "rotate-cw" | "rss" | "save" | "scissors" | "search" | "send" | "server" | "settings" | "share" | "share-2" | "shield" | "shield-off" | "shopping-bag" | "shopping-cart" | "shuffle" | "sidebar" | "skip-back" | "skip-forward" | "slack" | "slash" | "sliders" | "smartphone" | "smile" | "speaker" | "sprout" | "square" | "star" | "star-filled" | "stop-circle" | "storm" | "sun" | "sunrise" | "sunset" | "table" | "tablet" | "tag" | "target" | "terminal" | "thermometer" | "thumbs-down" | "thumbs-up" | "toggle-left" | "toggle-right" | "tool" | "trash" | "trash-2" | "trello" | "trending-down" | "trending-up" | "triangle" | "truck" | "trygfonden" | "tv" | "twitch" | "twitter" | "type" | "umbrella" | "underline" | "unlock" | "upload" | "upload-cloud" | "user" | "user-check" | "user-minus" | "user-plus" | "user-x" | "users" | "video" | "video-off" | "voicemail" | "volume" | "volume-1" | "volume-2" | "volume-x" | "watch" | "wifi" | "wifi-off" | "wind" | "x" | "x-circle" | "x-octagon" | "x-square" | "youtube" | "zap" | "zap-off" | "zoom-in" | "zoom-out" | undefined |
iconPlacement | icon-placement | Set the position of the icon on a button with an icon | "left" | "none" | "right" | 'none' |
loading | loading | Set the Button state to loading to display a spinner icon | boolean | false |
onDark | on-dark | Set to true if the Button is displayed on dark background | boolean | false |
ping | ping | The ping property is a space-separated list of URLs. When the link is followed, the browser will send POST requests with the body PING to the URLs. Documentation | string | undefined |
rel | rel | Specifies the relationship of the target object to the link object. The value is a space-separated list of link types. | "alternate" | "author" | "bookmark" | "external" | "help" | "license" | "me" | "next" | "nofollow" | "noopener" | "noreferrer" | "opener" | "prev" | "privacy-policy" | "search" | "tag" | "terms-of-service" | undefined |
target | target | Specifies where to display the linked URL. Only applies when an href is provided. Special keywords: "_blank", "_self", "_parent", "_top". Documentation | "_blank" | "_parent" | "_self" | "_top" | undefined |
text | text | Set a text to be displayed in the content slot of the button | string | undefined |
type | type | Set the type of button | "button" | "reset" | "submit" | 'button' |
uuid | uuid | Give this instance of button a custom ID, or keep the default. | string | uuidv4() |
variant | variant | Set the variant of the button | "primary" | "secondary" | "tertiary" | 'primary' |
Slots
| Slot | Description |
|---|---|
"end-content" | Slot for the end content of the button |
"start-content" | Slot for the start content of the button |
CSS Custom Properties
| Name | Description |
|---|---|
--button-background-color-primary | Set the primary background color. |
--button-background-color-secondary | Set the secondary background color. |
--button-background-color-secondary-disabled | Set the secondary background color. |
--button-background-color-secondary-filled | Set the secondary filled background color. |
--button-background-color-secondary-filled-disabled | Set the secondary filled background color. |
--button-background-color-secondary-filled-hover | Set the secondary filled background color. |
--button-background-color-secondary-filled-pressed | Set the secondary filled background color. |
--button-background-color-secondary-hover | Set the secondary background color. |
--button-background-color-secondary-pressed | Set the secondary background color. |
--button-background-color-tertiary | Set the tertiary background color. |
--button-background-color-tertiary-disabled | Set the tertiary background color. |
--button-background-color-tertiary-hover | Set the tertiary background color. |
--button-background-color-tertiary-on-dark | Set the tertiary background color. |
--button-background-color-tertiary-on-dark-disabled | Set the tertiary background color. |
--button-background-color-tertiary-on-dark-hover | Set the tertiary background color. |
--button-background-color-tertiary-on-dark-pressed | Set the tertiary background color. |
--button-background-color-tertiary-pressed | Set the tertiary background color. |
--button-border-color-primary | Set the border color. |
--button-border-color-primary-disabled | Set the disabled border color. |
--button-border-color-primary-hover | Set the hover border color. |
--button-border-color-primary-pressed | Set the pressed border color. |
--button-border-color-secondary | Set the secondary border color. |
--button-border-color-secondary-disabled | Set the secondary disabled border color. |
--button-border-color-secondary-hover | Set the secondary hover border color. |
--button-border-color-secondary-pressed | Set the secondary pressed border color. |
--button-border-width-primary | Set the border width of the primary button |
--button-border-width-secondary | Set the border width of the secondary button |
--button-bottom-left-radius | Set the bottom-left radius of the button. |
--button-bottom-right-radius | Set the bottom-right radius of the button. |
--button-font-family | Set the font family of the button. |
--button-font-size | Set the font size of the button. |
--button-gap-icon-text | Set the gap between icon and text. |
--button-icon-color | Set the icon color. |
--button-line-height | Set the line height. |
--button-text-color-primary | Set the text color. |
--button-text-color-primary-disabled | Set the disabled text color. |
--button-text-color-primary-hover | Set the hover text color. |
--button-text-color-primary-pressed | Set the pressed text color. |
--button-text-color-secondary | Set the secondary text color. |
--button-text-color-secondary-disabled | Set the secondary disabled text color. |
--button-text-color-secondary-filled | Set the secondary filled text color. |
--button-text-color-secondary-filled-disabled | Set the secondary filled disabled text color. |
--button-text-color-secondary-filled-hover | Set the secondary filled text color. |
--button-text-color-secondary-filled-pressed | Set the secondary filled text color. |
--button-text-color-secondary-hover | Set the secondary text color. |
--button-text-color-secondary-pressed | Set the secondary text color. |
--button-text-color-tertiary | Set the tertiary text color. |
--button-text-color-tertiary-disabled | Set the tertiary disabled text color. |
--button-text-color-tertiary-hover | Set the tertiary text color. |
--button-text-color-tertiary-on-dark | Set the tertiary text color. |
--button-text-color-tertiary-on-dark-disabled | Set the tertiary disabled text color. |
--button-text-color-tertiary-on-dark-hover | Set the tertiary text color. |
--button-text-color-tertiary-on-dark-pressed | Set the tertiary text color. |
--button-text-color-tertiary-pressed | Set the tertiary text color. |
--button-top-left-radius | Set the top-left radius of the button. |
--button-top-right-radius | Set the top-right radius of the button. |
--button-width | Set the width. |
Dependencies
Depends on
Graph
graph TD;
anchor-button --> anchor-spinner
anchor-button --> anchor-icon
style anchor-button fill:#f9f,stroke:#333,stroke-width:4pxBuilt with StencilJS
| Anchor version | Status | Notes |
|---|---|---|
| 3.0 | Ready for Implementation | This component is in sync with Figma. |