Version: v5

ion-fab-button

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 <ion-fab-button>FAB</ion-fab-button>. They need to be wrapped with an <ion-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:

Usage

Angular
Javascript
React
Stencil
Vue

<ion-content>
  <!-- Fixed Floating Action Button that does not scroll with the content -->
  <ion-fab slot="fixed">
    <ion-fab-button>Button</ion-fab-button>
  </ion-fab>

  <!-- Default Floating Action Button that scrolls with the content.-->
  <ion-fab-button>Default</ion-fab-button>

  <!-- Mini -->
  <ion-fab-button size="small">Mini</ion-fab-button>

  <!-- Colors -->
  <ion-fab-button color="primary">Primary</ion-fab-button>
  <ion-fab-button color="secondary">Secondary</ion-fab-button>
  <ion-fab-button color="danger">Danger</ion-fab-button>
  <ion-fab-button color="light">Light</ion-fab-button>
  <ion-fab-button color="dark">Dark</ion-fab-button>
</ion-content>

<ion-content>
  <!-- Fixed Floating Action Button that does not scroll with the content -->
  <ion-fab slot="fixed">
    <ion-fab-button>Button</ion-fab-button>
  </ion-fab>

  <!-- Default Floating Action Button that scrolls with the content.-->
  <ion-fab-button>Default</ion-fab-button>

  <!-- Mini -->
  <ion-fab-button size="small">Mini</ion-fab-button>

  <!-- Colors -->
  <ion-fab-button color="primary">Primary</ion-fab-button>
  <ion-fab-button color="secondary">Secondary</ion-fab-button>
  <ion-fab-button color="danger">Danger</ion-fab-button>
  <ion-fab-button color="light">Light</ion-fab-button>
  <ion-fab-button color="dark">Dark</ion-fab-button>
</ion-content>

import React from 'react';
import { IonContent, IonFab, IonFabButton } from '@ionic/react';

export const FabButtonExample: React.FC = () => (
  <IonContent>
    {/*-- Fixed Floating Action Button that does not scroll with the content --*/}
    <IonFab slot="fixed">
      <IonFabButton>Button</IonFabButton>
    </IonFab>

    {/*-- Default Floating Action Button that scrolls with the content.--*/}
    <IonFabButton>Default</IonFabButton>

    {/*-- Mini --*/}
    <IonFabButton size="small">Mini</IonFabButton>

    {/*-- Colors --*/}
    <IonFabButton color="primary">Primary</IonFabButton>
    <IonFabButton color="secondary">Secondary</IonFabButton>
    <IonFabButton color="danger">Danger</IonFabButton>
    <IonFabButton color="light">Light</IonFabButton>
    <IonFabButton color="dark">Dark</IonFabButton>
  </IonContent>
);

import { Component, h } from '@stencil/core';

@Component({
  tag: 'fab-button-example',
  styleUrl: 'fab-button-example.css',
})
export class FabButtonExample {
  render() {
    return [
      <ion-content>
        {/* Fixed Floating Action Button that does not scroll with the content */}
        <ion-fab slot="fixed">
          <ion-fab-button>Button</ion-fab-button>
        </ion-fab>

        {/* Default Floating Action Button that scrolls with the content */}
        <ion-fab-button>Default</ion-fab-button>

        {/* Mini */}
        <ion-fab-button size="small">Mini</ion-fab-button>

        {/* Colors */}
        <ion-fab-button color="primary">Primary</ion-fab-button>
        <ion-fab-button color="secondary">Secondary</ion-fab-button>
        <ion-fab-button color="danger">Danger</ion-fab-button>
        <ion-fab-button color="light">Light</ion-fab-button>
        <ion-fab-button color="dark">Dark</ion-fab-button>
      </ion-content>,
    ];
  }
}

<template>
  <ion-content>
    <!-- Fixed Floating Action Button that does not scroll with the content -->
    <ion-fab slot="fixed">
      <ion-fab-button>Button</ion-fab-button>
    </ion-fab>

    <!-- Default Floating Action Button that scrolls with the content.-->
    <ion-fab-button>Default</ion-fab-button>

    <!-- Mini -->
    <ion-fab-button size="small">Mini</ion-fab-button>

    <!-- Colors -->
    <ion-fab-button color="primary">Primary</ion-fab-button>
    <ion-fab-button color="secondary">Secondary</ion-fab-button>
    <ion-fab-button color="danger">Danger</ion-fab-button>
    <ion-fab-button color="light">Light</ion-fab-button>
    <ion-fab-button color="dark">Dark</ion-fab-button>
  </ion-content>
</template>

<script>
  import { IonContent, IonFab, IonFabButton } from '@ionic/vue';
  import { defineComponent } from 'vue';

  export default defineComponent({
    components: { IonContent, IonFab, IonFabButton },
  });
</script>

Properties

activated

Description	`true`の場合、ファブボタンにクローズアイコンを表示します。
Attribute	`activated`
Type	`boolean`
Default	`false`

closeIcon

Description	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.
Attribute	`close-icon`
Type	`string`
Default	`'close'`

color

Description	The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see theming.
Attribute	`color`
Type	`string ｜ undefined`
Default	`undefined`

disabled

Description	`true`の場合、ユーザーはファブボタンを操作することができません。
Attribute	`disabled`
Type	`boolean`
Default	`false`

download

Description	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).
Attribute	`download`
Type	`string ｜ undefined`
Default	`undefined`

href

Description	Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.
Attribute	`href`
Type	`string ｜ undefined`
Default	`undefined`

mode

Description	modeは、どのプラットフォームのスタイルを使用するかを決定します。
Attribute	`mode`
Type	`"ios" ｜ "md"`
Default	`undefined`

rel

Description	Specifies the relationship of the target object to the link object. The value is a space-separated list of link types.
Attribute	`rel`
Type	`string ｜ undefined`
Default	`undefined`

routerAnimation

Description	When using a router, it specifies the transition animation when navigating to another page using `href`.
Attribute	`undefined`
Type	`((baseEl: any, opts?: any) => Animation) ｜ undefined`
Default	`undefined`

routerDirection

Description	When using a router, it specifies the transition direction when navigating to another page using `href`.
Attribute	`router-direction`
Type	`"back" ｜ "forward" ｜ "root"`
Default	`'forward'`

show

Description	`true`の場合、fabボタンがfab-listにあるときに表示されます。
Attribute	`show`
Type	`boolean`
Default	`false`

size

Description	ボタンの大きさを指定します。ミニファブボタンを作るには、`small`に設定します。
Attribute	`size`
Type	`"small" ｜ undefined`
Default	`undefined`

target

Description	Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`.
Attribute	`target`
Type	`string ｜ undefined`
Default	`undefined`

translucent

Description	If `true`, the fab button will be translucent. Only applies when the mode is `"ios"` and the device supports `backdrop-filter`.
Attribute	`translucent`
Type	`boolean`
Default	`false`

type

Description	ボタンの種類です。
Attribute	`type`
Type	`"button" ｜ "reset" ｜ "submit"`
Default	`'button'`

Events

Name	Description
`ionBlur`	ボタンのフォーカスが外れたときに発行されます。
`ionFocus`	ボタンにフォーカスが当たっているときに発行されます。

Methods

No public methods available for this component.

CSS Shadow Parts

Name	Description
`close-icon`	ファブリストを開いたときに表示されるクローズアイコン（ion-iconを使用します）。
`native`	すべての子要素をラップするネイティブHTMLのボタンまたはアンカー要素です。

CSS Custom Properties

Name	Description
`--background`	ボタンの背景
`--background-activated`	ボタンが押されたときの背景。注意：これを設定すると、Material Designの波紋に干渉します。
`--background-activated-opacity`	押されたときのボタンの背景の不透明度
`--background-focused`	タブキーでフォーカスしたときのボタンの背景
`--background-focused-opacity`	タブキーでフォーカスしたときのボタンの背景の不透明度
`--background-hover`	ホバー時のボタンの背景
`--background-hover-opacity`	ホバー時のボタン背景の不透明度
`--border-color`	ボタンのボーダーカラー
`--border-radius`	ボタンの境界半径
`--border-style`	ボタンのボーダースタイル
`--border-width`	ボタンのボーダー幅
`--box-shadow`	ボタンのボックスシャドウ
`--close-icon-font-size`	クローズアイコンのFont Size
`--color`	ボタンの文字色
`--color-activated`	ボタンが押されたときの文字色
`--color-focused`	タブキーでフォーカスしたときのボタンの文字色
`--color-hover`	ホバー時のボタンの文字色
`--padding-bottom`	ボタンのBottom Padding
`--padding-end`	ボタンの向きが左から右の場合はRight Padding、右から左の場合はLeft Paddingとなります。
`--padding-start`	ボタンの向きが左から右の場合はLeft Padding、右から左の場合はRight Paddingとなります。
`--padding-top`	ボタンのTop Padding
`--ripple-color`	ボタンリプルエフェクトの色
`--transition`	ボタンの遷移

Slots

No slots available for this component.

Usage​

Properties​

activated​

closeIcon​

color​

disabled​

download​

href​

mode​

rel​

routerAnimation​

routerDirection​

show​

size​

target​

translucent​

type​

Events​

Methods​

CSS Shadow Parts​

CSS Custom Properties​

Slots​

Contents