Button
Examples
Figma
Props
Prop |
Type |
Default |
Description |
text* |
|
|
|
nopadding |
boolean |
false |
|
color |
|
null |
|
type |
string |
"secondary" |
|
size |
string |
"medium" |
|
flex |
string |
"normal" |
|
height |
string |
"fixed" |
|
selected |
boolean |
false |
|
clickType |
string |
'payloadTrigger' |
|
clickTrigger |
|
null |
|
onClick |
|
null |
|
Slots
Name |
Default |
Props |
Fallback |
|
Yes |
|
|
Events
Name |
Type |
Detail |
click |
forwarded |
|
Source
<script>
import { executeTrigger } from '../actions'
import { getContext } from 'svelte';
export let nopadding = false
export let color = null;
export let type = "secondary"
export let size = "medium"
export let flex = "normal"
export let height = "fixed"
export let text = undefined;
export let selected = false
export let clickType = 'payloadTrigger';
export let clickTrigger = null;
export let onClick = null
const c = getContext("buttonBar");
const buttonPayload = c?.buttonPayload
if(buttonPayload) {
}
const handleClick = () => {
if(clickTrigger)
executeTrigger(clickTrigger, buttonPayload ? $buttonPayload : undefined)
if(onClick)
onClick(buttonPayload ? $buttonPayload : undefined);
}
</script>
{#if clickType === 'payloadTrigger'}
<span
on:click
on:click={handleClick}
class={`Button Button--${type} Button--${size} button ${type} ${size} ${flex} height-${height}`}
class:primary={type==='primary'}
class:selected={selected}
class:Button--selected={selected}
class:nopadding
>
<slot/>
{ text || "" }
</span>
{:else}
<a
href={clickTrigger}
target={clickType === 'linkTargetBlank' ? '_blank' : '_self'}
class={`Button Button--${type} Button--${size} button ${type} ${size} ${flex} height-${height}`}
class:primary={type==='primary'}
class:selected={selected}
class:Button--selected={selected}
class:nopadding
>
<slot/>
{ text || "" }
</a>
{/if}
<style>
.button {
border: var(--border-width) solid var(--border-color);
color: var(--color-text-button);
border-radius: var(--border-radius-button);
background-color: var(--color-background-button);
box-shadow: var(--box-shadow);
display: inline-flex;
gap: var(--distance-xs);
overflow: hidden;
text-overflow: ellipsis;
cursor: pointer;
align-items: center;
justify-content: center;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
text-align: center;
text-decoration: none;
box-sizing: border-box;
}
.button.normal {
flex-grow: 0;
}
.button.fill {
flex-grow: 1;
}
.button.small {
min-height: 32px;
padding: var(--distance-tiny) var(--distance-s);
font: var(--font-button);
}
.button.small.height-fixed {
height: 32px;
}
.button.medium {
min-height: 40px;
padding: var(--distance-tiny) var(--distance-m);
font: var(--font-button);
}
.button.medium.height-fixed {
height: 40px;
}
.button.large {
min-height: 56px;
padding: var(--distance-tiny) var(--distance-s-m);
font: var(--font-headline-5);
}
.button.large.height-fixed {
height: 56px;
}
.button.selected {
background-color: var(--color-background-highlight);
}
.button.ghost {
background-color: transparent;
}
.button.link {
border: none;
background-color: transparent;
padding-left: var(--distance-xs);
padding-right: var(--distance-xs);
}
.button.spacer {
visibility: hidden;
pointer-events: none;
}
.primary {
color: var(--color-text-button-primary);
background-color: var(--color-background-button-primary);
}
span.button {
font-size: var(--font-size-buttons);
}
.nopadding {
padding: 0;
}
.button:empty {
display: none;
}
.button.noborder {
border: none;
}
</style>