<c-login-buttons>
Examples
<template>
<div>
<c-login-buttons>
<c-login-button :src="logo(mdiSchool)" alt="Haka logo">
Haka login
</c-login-button>
<c-login-button :src="logo(mdiDomain)" alt="Virtu logo">
Virtu login
</c-login-button>
<c-login-button :src="logo(mdiAccountCircle)" alt="CSC logo">
CSC login
</c-login-button>
</c-login-buttons>
</div>
</template>
<script setup lang="ts">
import { mdiAccountCircle, mdiDomain, mdiSchool } from '@mdi/js';
// Stand-in provider logos; use your identity provider's logo url instead.
const logo = (path: string) =>
`data:image/svg+xml;utf8,${encodeURIComponent(
`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="${path}" fill="#336b8e"/></svg>`,
)}`;
</script>
<template>
<div>
<c-login-buttons>
<c-login-button :src="logo(mdiSchool)" alt="Haka logo">
Haka login
</c-login-button>
<c-login-button :src="logo(mdiAccountCircle)" alt="CSC logo">
CSC login
</c-login-button>
</c-login-buttons>
</div>
</template>
<script setup lang="ts">
import { mdiAccountCircle, mdiSchool } from '@mdi/js';
// Stand-in provider logos; use your identity provider's logo url instead.
const logo = (path: string) =>
`data:image/svg+xml;utf8,${encodeURIComponent(
`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="${path}" fill="#336b8e"/></svg>`,
)}`;
</script>
API reference
<c-login-buttons>
Slots
| Slot | Description |
|---|---|
default | Default slot |
<c-login-button>
Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
alt | alt | string | '' | Alt description for logo |
href | href | string | '' | Login provider link. Do not set if using a javascript click handler |
src | src | string | '' | Login provider logo url |
Slots
| Slot | Description |
|---|---|
default | The title shown in the bottom bar |
image | Custom provider logo markup (an inline `<svg>`, a `<picture>`, …) replacing the default `<img>` rendered from `src` |
CSS parts
Style from outside with c-login-button::part(name) — parts are the library's only styling customization API.
| Part | Description |
|---|---|
root | The anchor element forming the whole clickable card |
image-wrap | The area above the title bar that centers the logo (default image or slotted content) |
image | The default provider logo `<img>` (absent when the `image` slot is used) |
title | The bottom title bar wrapping the slotted label |