ActionIcon with a label or some text?

[squarism]

Seems like the ActionIcon is a Box so text always flows around it. I was playing around with a few options and couldn't find a nice way to have an ActionIcon with a label right next to it.

<ActionIcon>
  <AnyIconLibrary />
</ActionIcon>
Click me.

It doesn't matter if the text is bare, in a <div> or <span> it always wraps because it is in a Box (as far as I can tell).

I made a demo of how to make one yourself using a Group but haven't polished it that much. I'm just curious if anyone has any input or maybe this is just a tip for others in the future?

import { useState } from 'react'

import { Group, Text } from '@mantine/core'
import { createStyles } from '@mantine/core'

import './App.css'

import { SunIcon } from '@radix-ui/react-icons'

const useStyles = createStyles({
  clicked: {
    color: "gray",
    transform: "translateY(10%)",
  }
})


export default function App() {
  const [clicked, setClick] = useState(false)

  const { classes } = useStyles()
  
  return(
    <Group position="left">
      <SunIcon
        onMouseDown={(e) => { e.preventDefault(); setClick(true) }}
        onMouseUp={() => { setClick(false) }}
        onMouseLeave={() => { setClick(false) }}
        className={clicked ? classes.clicked : ""}
      />
      <div>
        <Text align="left">
          meow
        </Text>
      </div>
    </Group>
  )
}

https://replit.com/@squarism/MantineActionIconLabel#src/App.tsx

It will look like this and do similar movement as the ActionIcon when clicked. I'd prefer to reuse the ActionIcon if I could get the text to be pinned like a horizontal label. Ultimately, I'm ok with building a custom component. I'm just curious if ActionIcons are always supposed to be mystery meat navigation. I was able to put a Tooltip outside of an ActionIcon which works very well.

[zhulien-ivanov]

If you want an icon with a label, why don't you use Button or UnstyledButton? Or you need only the icon to be interactable?
In any case, you can use Group, like you did. Also, ActionIcon is polymorphic, so you can change the root element. See the example in this section - https://mantine.dev/core/action-icon/#usage-with-react-router-and-other-libraries.