IconButton

A button component that displays an icon in various sizes.

Anchor to propsProps

Anchor to Icon Icon LucideIcon required: Lucide icon component to render
Anchor to buttonStyles buttonStyles string: Custom CSS classes for the button container
Anchor to filled filled boolean: Whether the button is in a filled/active state
Anchor to iconStyles iconStyles string: Custom CSS classes for the icon
Anchor to onClick onClick () => void: Click handler
Anchor to size size 'default' | 'sm' | 'lg': Button size variant

Examples

tsx

import React from 'react'

import {FavoriteButton} from '@shopify/shop-minis-react'

export default function MyComponent() {

return (

</div>

)

}

Preview

Examples

tsx

import React from 'react'

import {FavoriteButton} from '@shopify/shop-minis-react'

export default function MyComponent() {
  return (
    <div className="flex items-center gap-4">
      <FavoriteButton />
      <FavoriteButton filled />
    </div>
  )
}

Description

A default icon button

tsx

import React from 'react'

import {FavoriteButton} from '@shopify/shop-minis-react'

export default function MyComponent() {
  return (
    <div className="flex items-center gap-4">
      <FavoriteButton />
      <FavoriteButton filled />
    </div>
  )
}

Description

An icon button with filled state

tsx

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} />
}

Description

A small-sized icon button

tsx

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}
    />
  )
}

Description

A large-sized icon button

tsx

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} />
}

Was this page helpful?