Components
IconButton

IconButton

The IconButton component is used to create buttons with icons. It provides various customization options, including different button types, sizes, and states.

Props

NameTypeDefaultDescription
type"default" | "primary" | "plain" | "borderless" | "text" | "primary-borderless" | "primary-text" | "primary-light-borderless" | "primary-light-text" | "light-borderless" | "light-text""default"The type of the button. See available types below.
size"default" | "large" | "medium" | "small" | "mini""default"The size of the button.
loadingbooleanfalseIf true, the button is in a loading state.
disabledbooleanfalseIf true, the button is disabled.
errorbooleanfalseIf true, the button is in an error state.
successbooleanfalseIf true, the button is in a success state.
warningbooleanfalseIf true, the button is in a warning state.
iconstring | ReactElement | React.ReactNodeThe icon to display on the button. Refer to the Icon component for available icon options.
childrenstring | ReactElement | React.ReactElement[]The content to display on the button.
htmlType"button" | "submit" | "reset""button"The type attribute for the button.

Try It

Open on CodeSandboxOpen Sandbox
import { IconButton } from '@kloktun/uikit'
import SearchIcon from './search-icon.tsx'
import DuckIcon from './duck-icon.tsx'

export default function IconButtonExample() {
  return (
    <div className="flex flex-row gap-4">
      <IconButton><SearchIcon/></IconButton>
      <IconButton type="primary" size="large"><SearchIcon/></IconButton>
      <IconButton type="plain" icon={<DuckIcon/>} />
      <IconButton type="plain" icon={<DuckIcon/>} loading />
      <IconButton type="borderless" size="small" icon={<DuckIcon/>} disabled />
    </div>
  );
}
ButtonInput