Ion-chip: How to disable it without lowering the opacity?

Ionic Framework
1

I’m trying to use ion-chip to highlight labels in my app like this:

<ion-chip>Name</ion-chip> James

The problem is that when you mouse over ion-chip, it looks like you can click on it (the cursor becomes a finger and the chip is highlighted). However, my chip doesn’t do anything, so I tried setting the disabled property. This makes ion-chip unclickable, but now it’s very hard to read because the opacity is lowered by 0.4.

I could override the CSS myself, but I’m wondering if I’m just using this wrong, and it shouldn’t be used as fancy styling for a label?

2

If you aren’t using them as clickable elements, then I would just create your own vs. trying to override the CSS. It only takes some padding, color, and rounded corners.

But, if you are set on using an ion-chip, then this seems to work:

<ion-chip :disabled="true" style="opacity: 1;">Disabled</ion-chip>
1 Like