Buttons provide a clickable element, which can be used in forms, or anywhere that needs simple, standard button functionality. They may display text, icons, or both. Buttons can be styled with several attributes to look a specific way.
The color to use from your application's color palette. Default options are: "primary", "secondary", "tertiary", "success", "warning", "danger", "light", "medium", and "dark".
<script lang="ts">
import { Button } from '@svonic/core';
</script>
<Button color="primary">Primary</Button>
<Button color="secondary">Secondary</Button>
<Button color="tertiary">Tertiary</Button>
<Button color="success">Success</Button>
<Button color="warning">Warning</Button>
<Button color="danger">Danger</Button>
<Button color="light">Light</Button>
<Button color="medium">Medium</Button>
<Button color="dark">Dark</Button>
If true, the user cannot interact with the component.
<script lang="ts">
import { Button } from '@svonic/core';
</script>
<Button disabled="{true}">Disabled</Button>
<Button disabled="{false}">Enabled</Button>
Set to "block" for a full-width button or to "full" for a full-width button without left and right borders.
<script lang="ts">
import { Button } from '@svonic/core';
</script>
<Button color="primary" expand="block">Block</Button>
<Button color="success" expand="full">Full</Button>
Set to "clear" for a transparent button, to "outline" for a transparent button with a border, or to "solid". The default style is "solid" except inside of a toolbar, where the default is "clear".
<script lang="ts">
import { Button } from '@svonic/core';
</script>
<Button fill="clear">Clear</Button>
<Button fill="default">Default</Button>
<Button fill="outline">Outline</Button>
<Button fill="solid">Solid</Button>
Set to "round" for a button with rounded corners.
<script lang="ts">
import { Button } from '@svonic/core';
</script>
<Button shape="round">Round</Button>
This attribute specifies the size of the button. Setting this attribute will change the height and padding of a button.
<script lang="ts">
import { Button } from '@svonic/core';
</script>
<Button color="primary" size="default">Default</Button>
<Button color="success" size="large">Large</Button>
<Button color="danger" size="small">Small</Button>
If true, activates a button with a heavier font weight.
<script lang="ts">
import { Button } from '@svonic/core';
</script>
<Button color="primary" strong="{true}">Strong</Button>
<Button color="success" strong="{false}">Default</Button>
Various Button with Icons Demo.
<script lang="ts">
import { Button, Icon } from '@svonic/core';
import { star } from 'ionicons/icons/index.js';
</script>
<Button>
<Icon icon="{star}" slot="start" />
Left Icon
</Button>
<Button>
Right Icon
<Icon icon="{star}" slot="end" />
</Button>
<Button>
<Icon icon="{star}" slot="icon-only" />
</Button>
button
reset
submit
danger
dark
light
medium
primary
secondary
success
tertiary
warning
string
false
true
block
full
clear
default
outline
solid
undefined
string
undefined
ios
md
undefined
alternate
archives
author
bookmark
external
first
help
index
last
license
me
next
nofollow
noopener
noreferrer
opener
prev
search
sidebar
tag
up
undefined
back
forward
root
undefined
round
undefined
default
large
small
false
true
_blank
_self
_parent
_top
undefined
button
reset
submit
false
true
bottom
content
end
error
header
helper
icon-only
primary
secondary
start
time-label
title
top
undefined
See this open Svelte issue. #1689, Slotted content for Web Component nested inside of a Svelte component is not applied to the Web Component
Svonic
Svonic is a Svelte component library built on top of the Ionic Framework.