Fab labels in Ionic 4?

Pancha27 · August 27, 2018, 5:49am

how to add Fab labels in Ionic 4?

bgies · August 27, 2018, 8:55am

Check the docs: https://beta.ionicframework.com/docs/api/fab

<ion-button class="button button-ios button-solid button-solid-ios hydrated" tappable="" fill="solid">
   Test
</ion-button>

Pancha27 · August 27, 2018, 9:01am

Thank you for the reply.
But i need like this

Its work for V3 bt not work for V4

Reffed link - https://stackoverflow.com/questions/39842324/whats-the-correct-way-of-inserting-label-in-an-ionic-fab-list

meta0102 · December 6, 2018, 11:02am

any news? figured out that the problem is the shadow-root of the ion-fab-button.
you have to add

contain: layout;
overflow: visible;

to the shadow-root button element. however this is not possible by adding it to the css

Clickaplicaciones · January 2, 2019, 1:39pm

Why is it not possible to add a label to the fab button?

I have tried in all ways, and I can not show a text or even as it comes in the example since the ion-fab-button
“< ion-fab-button >Facebook</ ion-fab-button >”
but the button is locked to an icon size.

Please, I need help with this.
Regards

MrFloppy · January 5, 2019, 12:33pm

It might be a little late but I just stumbled upon this issue as well and solved it with a css pseudo element which might be a solution for you as well:

HTML:

<ion-fab vertical="bottom" horizontal="end">
    <ion-fab-button>
      <ion-icon name="add"></ion-icon>
    </ion-fab-button>
    <ion-fab-list side="top">
      <ion-fab-button (click)="do1()" data-desc="Description 1">
        <ion-icon name="contact"></ion-icon>
      </ion-fab-button>
      <ion-fab-button (click)="do2()" data-desc="Description 2">
        <ion-icon name="person-add"></ion-icon>
      </ion-fab-button>
    </ion-fab-list>
  </ion-fab>

SCSS:

ion-fab-button[data-desc] {
  position: relative;
}

ion-fab-button[data-desc]::after {
  position: absolute;
  content: attr(data-desc);
  z-index: 1;
  right: 55px;
  bottom: 4px;
  background-color: var(--ion-color-primary);
  padding: 9px;
  border-radius: 15px;
  color: white;
  box-shadow: 0 3px 5px -1px rgba(0,0,0,0.2), 0 6px 10px 0 rgba(0,0,0,0.14), 0 1px 18px 0 rgba(0,0,0,0.12);
}

Hope you or someone else can use it. Good luck

bassam1994 · January 7, 2019, 8:07am

@MrFloppy, A lot of thanks, that working perfectly, but it’s not general. I mean when data-desc should be from ngFor , that will give an error “data-desc” in not angular attribute for ion-fab-button, so regarding that, I fix that issue, by generating directive “data-desc” and use it in fab-button component and in the style I add prefix of angular “ng-reflect” to “data-desc” to be “ng-reflect-ng-reflect”.
and that working good.

Dietmar · February 16, 2019, 9:18am

Great idea! I’m looking for a solution where i can use ngFor for a dynamic fab-list with labels. Can you send a code example - it sounds a little bit complicated for me and I would appreciate a little help

bassam1994 · February 17, 2019, 10:06am

You only need to declare directive has the same name “data-desc” or any name you need and change content in css to be “ng-reflect-data-desc”

Dietmar · February 17, 2019, 10:49am

Thank you Bassam - that sounds quite simple. Have a nice weekend!

jlozoya · March 2, 2019, 6:56pm

With ionic 4 i did this:

  <ion-fab vertical="bottom" horizontal="end" slot="fixed">
    <ion-badge color="danger">0</ion-badge>
    <ion-fab-button>
      <ion-icon name="cog"></ion-icon>
    </ion-fab-button>

    <ion-fab-list side="top">
      <ion-fab-button>
        <ion-icon name="cart"></ion-icon>
      </ion-fab-button>
      <ion-label>lavel 1</ion-label>

      <ion-fab-button>
        <ion-icon name="clipboard"></ion-icon>
      </ion-fab-button>
      <ion-label>lavel 2</ion-label>

      <ion-fab-button>
        <ion-icon name="archive"></ion-icon>
      </ion-fab-button>
      <ion-label>lavel 3</ion-label>

    </ion-fab-list>
  </ion-fab>

I also include a badge that could be removed.

  ion-fab-button {
    margin-left: 140px;
    overflow: visible;
    position: relative;
  }
  ion-fab-list {
    ion-label {
      position: relative;
      top: 40px;
      right: 25px;
      color: white;
      background-color: rgba(0,0,0,0.7);
      line-height: 24px;
      padding: 4px 8px;
      border-radius: 4px;
    }
  }
  ion-fab {
    ion-badge {
      position: relative;
      top: 10px;
      left: 140px;
    }
  }

With this way you can bind the labels text or add a different events.

lucario3 · March 30, 2019, 4:45pm

Thanks a lot, this works great

rashmi1995 · April 8, 2019, 12:04pm

How to add ion-label when the ion-fab-button is created from ngFor?

jlozoya · April 8, 2019, 2:12pm

Use *ngFor inside ng-container to prevent affect the css.

  <ion-fab vertical="bottom" horizontal="end" slot="fixed">

    <ion-badge color="danger">0</ion-badge>
    <ion-fab-button>
      <ion-icon name="cog"></ion-icon>
    </ion-fab-button>

    <ion-fab-list side="top">

      <ng-container *ngFor="let item of items">
        <ion-fab-button (click)="someFunction(item)">
          <ion-icon [name]="item.icon"></ion-icon>
        </ion-fab-button>
        <ion-label (click)="someFunction(item)">
          {{ item.title }}
        </ion-label>
      </ng-container>

    </ion-fab-list>
  </ion-fab>

  items = [
    {
      title: 'foo',
      icon: 'card'
    },
    {
      title: 'bar',
      icon: 'trash'
    }
  ];

  someFunction(item) {
    ...
  }

  ion-fab-button {
    margin-left: 140px;
    overflow: visible;
    position: relative;
  }
  ion-fab-list {
    ion-label {
      position: relative;
      top: 40px;
      right: 25px;
      color: white;
      background-color: rgba(0,0,0,0.7);
      line-height: 24px;
      padding: 4px 8px;
      border-radius: 4px;
    }
  }
  ion-fab {
    ion-badge {
      position: relative;
      top: 10px;
      left: 50px;
    }
  }

Unkn0wn0x · July 15, 2019, 7:39pm

Great solution here!

In case you’re using i18n or something like this, I recommend to use the title attribute, since it’s a know property of <ion-fab-button> and can hold f. e. a translated and piped value like this:

<ion-fab-button title="{{ 'PAGE_HOME.FAB.MY_SUB_FAB' | translate }}">
	<ion-icon name="home"></ion-icon>
</ion-fab-button>

And replace all occurences of data-desc with title:

ion-fab-button[title] {
  position: relative;
}

ion-fab-button[title]::after {
  position: absolute;
  content: attr(title);
  z-index: 1;
  right: 55px;
  bottom: 4px;
  background-color: var(--ion-color-primary);
  padding: 9px;
  border-radius: 15px;
  color: white;
  box-shadow: 0 3px 5px -1px rgba(0,0,0,0.2), 0 6px 10px 0 rgba(0,0,0,0.14), 0 1px 18px 0 rgba(0,0,0,0.12);
}

Cheers
Unkn0wn0x

rafaeldcastro · November 21, 2019, 10:50am

you WERE DIVINE!!!
T-H-A-N-K -Y-O-U

jcmendes98 · January 8, 2020, 9:30am

Hi, do you know a way to make it always centered below ion-fab? If the size of the label differs, you need to change the margins to make it center… I’m trying to make it more responsive, but with no sucess.

simon-mueller · May 29, 2020, 1:27pm

Thanks @MrFloppy this is a very good solution

You can even use angular binding like this:

<ion-fab-button
        [attr.data-desc]="model"
      >

Thanks for your help

ReinaldoAguiar · June 11, 2020, 2:02pm

Melhor solução encontrada! Obrigado.

cuongdqpayment · July 12, 2020, 12:28am

I only used simply [att.data-desc]=“item.name” (of *ngFor), it works perfectly. Thank you

Topic		Replies	Views
Not able to add icon with label to Fab button in ionic 4 Ionic Framework	0	588	July 23, 2019
How to make a label for FAB's in a FAB list? ionic-v3	3	5888	February 7, 2017
How to place an ion-label underneath an ion-fab-button? Ionic Framework	1	1383	March 23, 2020
How to add text in button ion-fab ionic-v3	6	18493	June 16, 2017
Whats the correct way of inserting label in an Ionic FAB list IONIC 4 Appflow	1	686	July 19, 2021

Fab labels in Ionic 4?

Related topics