Svonic Overview Introduction Getting Started Svonic Core Buttons and Inputs Button Checkbox Chip Date Picker Input Searchbar Radio Radio Group Range Ripple Effect Segment Segment Button Select Select Option Textarea Toggle Content and Layout App Col Content Grid Refresher Refresher Content Row Data Display Accordion Accordion Group Avatar Badge Card Card Content Card Header Card Subtitle Card Title Icon Ionicon Image Thumbnail Floating Action Fab Fab Button Fab List List and Item Item Item Divider Item Group Item Option Item Options Item Reorder Item Reorder Group Item Sliding Label List List Header Note Overlays Action Sheet Menu Menu Button Menu Toggle Modal Popover Toast Navigation Breadcrumb Breadcrumbs Split Pane Tab Tab Bar Tab Button Tabs Progress Indicators Progress Bar Skeleton Text Spinner Toolbar Buttons Footer Header Title Toolbar Typography Text
Button iOS MD

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.

color

The color to use from your application's color palette. Default options are: "primary", "secondary", "tertiary", "success", "warning", "danger", "light", "medium", and "dark".

Primary Secondary Tertiary Success Warning Danger Light Medium 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>
disabled

If true, the user cannot interact with the component.

Disabled Enabled
<script lang="ts">
	import { Button } from '@svonic/core';
</script>

<Button disabled="{true}">Disabled</Button>
<Button disabled="{false}">Enabled</Button>
expand

Set to "block" for a full-width button or to "full" for a full-width button without left and right borders.

Block Full
<script lang="ts">
	import { Button } from '@svonic/core';
</script>

<Button color="primary" expand="block">Block</Button>
<Button color="success" expand="full">Full</Button>
fill

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".

Clear Default Outline Solid
<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>
shape

Set to "round" for a button with rounded corners.

Round
<script lang="ts">
	import { Button } from '@svonic/core';
</script>

<Button shape="round">Round</Button>
size

This attribute specifies the size of the button. Setting this attribute will change the height and padding of a button.

Default Large Small
<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>
strong

If true, activates a button with a heavier font weight.

Strong Default
<script lang="ts">
	import { Button } from '@svonic/core';
</script>

<Button color="primary" strong="{true}">Strong</Button>
<Button color="success" strong="{false}">Default</Button>
Button with Icons

Various Button with Icons Demo.

Left Icon Right Icon
<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>
Properties
Name
Type
Default Value
Description
buttonType

button

reset

submit

button
The type of the button.
color

danger

dark

light

medium

primary

secondary

success

tertiary

warning

string

undefined
The color to use from your application's color palette. Default options are: "primary", "secondary", "tertiary", "success", "warning", "danger", "light", "medium", and "dark".
disabled

false

true

false
If true, the user cannot interact with the component.
expand

block

full

undefined
Set to "block" for a full-width button or to "full" for a full-width button without left and right borders.
fill

clear

default

outline

solid

undefined

undefined
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".
href

string

undefined

undefined
Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.
mode

ios

md

undefined

undefined
The mode determines which platform styles to use.
rel

alternate

archives

author

bookmark

external

first

help

index

last

license

me

next

nofollow

noopener

noreferrer

opener

prev

search

sidebar

tag

up

undefined

undefined
Specifies the relationship of the target object to the link object. The value is a space-separated list of link types.
routerDirection

back

forward

root

undefined

forward
When using a router, it specifies the transition direction when navigating to another page using href.
shape

round

undefined

undefined
Set to "round" for a button with rounded corners.
size

default

large

small

undefined
This attribute specifies the size of the button. Setting this attribute will change the height and padding of a button.
strong

false

true

false
If true, activates a button with a heavier font weight.
target

_blank

_self

_parent

_top

undefined

undefined
Specifies where to display the linked URL. Only applies when an href is provided. Special keywords: "_blank", "_self", "_parent", "_top".
type

button

reset

submit

undefined
The type of the button.
Special Properties
Name
Type
Default Value
Description
svelteKitPrefetch

false

true

false
Allows using the SvelteKit prefetch feature on elements that will render an Anchor tag.
slot

bottom

content

end

error

header

helper

icon-only

primary

secondary

start

time-label

title

top

undefined

undefined
dispatched Events
Name
Description
ionBlur
Emitted when the component loses focus.
ionFocus
Emitted when the component has focus.
forwarded Events
Name
Description
click
This event is dispatched when the component is clicked.
Methods
No methods.
Slots
Name
Description
default
Content is placed between the named slots if provided without a slot.
end
Content is placed to the right of the button text in LTR, and to the left in RTL.
icon-only
Should be used on an icon in a button that has no text.
start
Content is placed to the left of the button text in LTR, and to the right in RTL.

Svonic

Svonic is a Svelte component library built on top of the Ionic Framework.