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
Fab Button iOS MD

Floating Action Buttons (FABs) represent the primary action in an application. By default, they have a circular shape. When pressed, the button may open more related actions. As the name suggests, FABs generally float over the content in a fixed position. This is not achieved exclusively by using an <FabButton>FAB</FabButton>. They need to be wrapped with an <Fab> component in order to be fixed over the content. If the FAB button is not wrapped with <ion-fab>, it will scroll with the content. FAB buttons have a default size, a mini size and can accept different colors:

Ionic References

Documentation
View Source Code
Properties
Name
Type
Default Value
Description
activated

false

true

false
If true, the fab button will be show a close icon.
closeIcon

close

string

close
The icon name to use for the close icon. This will appear when the fab button is pressed. Only applies if it is the main button inside of a fab containing a fab list.
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.
download

string

undefined

undefined
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).
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.
show

false

true

false
If true, the fab button will show when in a fab-button.
size

small

undefined

undefined
The size of the button. Set this to small in order to have a mini fab button.
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
slot

bottom

content

end

error

header

helper

icon-only

primary

secondary

start

time-label

title

top

undefined

undefined
Slot work around.

See this open Svelte issue. #1689,
Slotted content for Web Component nested inside of a Svelte component is not applied to the Web Component

translucent

false

true

false
If true, the Header will be translucent. Only applies when the mode is "ios" and the device supports backdrop-filter.
 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
No slots.

Svonic

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