IconButton

component

examples

• Default icon button

  description

  A default icon button

  import {IconButton} from '@shopify/shop-minis-react'
  import {Heart} from 'lucide-react'
  
  export default function MyComponent() {
    const handleClick = () => {
      console.log('Icon button clicked')
    }
  
    return <IconButton Icon={Heart} onClick={handleClick} />
  }
  

• Filled icon button

  description

  An icon button with filled state

  import {IconButton} from '@shopify/shop-minis-react'
  import {Heart} from 'lucide-react'
  
  export default function MyComponent() {
    const handleClick = () => {
      console.log('Icon button clicked')
    }
  
    return <IconButton Icon={Heart} filled onClick={handleClick} />
  }
  

• Small icon button

  description

  A small-sized icon button

  import {IconButton} from '@shopify/shop-minis-react'
  import {Star} from 'lucide-react'
  
  export default function MyComponent() {
    const handleClick = () => {
      console.log('Small icon button clicked')
    }
  
    return (
      <IconButton
        Icon={Star}
        size="sm"
        onClick={handleClick}
      />
    )
  }

• Large icon button

  description

  A large-sized icon button

  import {IconButton} from '@shopify/shop-minis-react'
  import {Settings} from 'lucide-react'
  
  export default function MyComponent() {
    const handleClick = () => {
      console.log('Large icon button clicked')
    }
  
    return <IconButton Icon={Settings} size="lg" onClick={handleClick} />
  }