IconButton

Icon buttons are commonly found in app bars and toolbars

Icons are also appropriate for toggle buttons that allow a single choice to be selected or deselected, such as adding or removing a star to an item.

Basic button


import { IconButton } from 'archi-ui'
import { Heart } from 'lucide-react'


<IconButton color='error'>
  <Heart />
</IconButton>

For larger or smaller icon buttons, use the size prop.

For different border rdius for Icon-Buttons use rounded prop.

Use color prop to apply different colors for component.

To use the IconButton component as hyperlink, just pass href prop or change the root element to <a> tag using component prop.

If href prop is passed, an <a> element will be used as the root node.

You can use the Badge component to add a badge to an IconButton.

API reference docs for the React IconButton component.

Name	Type	Default	Description
children	`node`	-	The content of the component.
className	`string`	-	Override or extend the styles applied to the component.
size	`'sm' \| 'md' \| 'lg'`	`'md'`	The size of the component.
rounded	`'none' \| 'full' \| 'sm' \| 'md' \| 'lg'`	`'full'`	The border-radius of the component.
color	`'default' \| 'primary' \| 'secondary' \| 'info' \| 'warning' \| 'success' \| 'error'`	`'default'`	The color of the component.
disabled	`bool`	`false`	If `true`, the component is disabled.
href	`string`	-	The URL to link to when the IconButton is clicked. If defined, an `<a>` element will be used as the root node.
component	`elementType`	-	The component used for the root node. Either a string to use a HTML element or a component.