Chip component with no icon

[puyanwei]

In our designs we have the exact functionality as what is provided by the Chip component, apart from having no tick/icon.

There doesn't seem to be way of removing the icon, which seems rather strict.

[rtivital]

https://codesandbox.io/p/sandbox/mantine-react-template-forked-68vp9x?file=%2Fsrc%2FApp.tsx%3A4%2C14&workspaceId=dd881b63-29f6-464c-bcdf-b5f78ad65b26

[puyanwei]

It seems a span gets injected into that area (which makes it hard to style) so the icon is removed in your example but the spacing isn't

[rtivital]

Chip is designed to work this way to preserve the same width with checked/unchecked state. You can change component padding with Styles API.

[SteveDowsett]

Isnt the solution to just not set the icon prop? In the docs there are examples of chips without icons and just text.

[puyanwei]

When you have no icon but click on the Chip it will show a blank space where the tick was as shown in the image above

[SteveDowsett]

Ah ok, that doesnt seem right, surely that needs to be fixed as its a bug?

…

On Tue, 10 Sept 2024 at 10:29, Puyan Wei ***@***.***> wrote: When you have no icon but click on the Chip it will show a blank space where the tick was as shown in the image above — Reply to this email directly, view it on GitHub <#6763 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AFH3NS66IE7WS2PF72ZIK33ZV23YJAVCNFSM6AAAAABNSKJWWCVHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTANRQGAZTEOI> . You are receiving this because you commented.Message ID: ***@***.***>

[zobweyt]

I guess this issue has been fixed in #8382