labelstringchildren?ReactNodecolor?'transparent'|'base'|'primary'|'secondary''transparent'onAction?() => void | Promise<void>renderItem?(props: { className: string; children: ReactNode; 'aria-label': string; triggerProps: IconButtonTriggerProps; }) => ReactNodesize?'sm'|'md'|'lg''md'tooltipDisabled?booleanfalsetooltipPlacement?Placement'top'| Prop | Type | Default |
|---|---|---|
label | string | - |
children? | ReactNode | - |
color? | 'transparent'|'base'|'primary'|'secondary' | 'transparent' |
onAction? | () => void | Promise<void> | - |
renderItem? | (props: { className: string; children: ReactNode; 'aria-label': string; triggerProps: IconButtonTriggerProps; }) => ReactNode | - |
size? | 'sm'|'md' |
型ベース（内部で固定する一部attrsは除外）: ComponentPropsWithRef<'button'>
'lg''md' |
tooltipDisabled? | boolean | false |
tooltipPlacement? | Placement | 'top' |
import { IconButton } from '@k8ordo/ui';import { CloseIcon } from '@k8ordo/ui';
<IconButton label="Close">
<CloseIcon size="sm" />
</IconButton><IconButton label="Close" size="sm">
<CloseIcon size="sm" />
</IconButton>
<IconButton label="Close" size="md">
<CloseIcon size="sm" />
</IconButton>
<IconButton label="Close" size="lg">
<CloseIcon size="sm" />
</IconButton><IconButton color="transparent" label="Close">
<CloseIcon size="sm" />
</IconButton>
<IconButton color="base" label="Close">
<CloseIcon size="sm" />
</IconButton>
<IconButton color="primary" label="Close">
<CloseIcon size="sm" />
</IconButton>
<IconButton color="secondary" label="Close">
<CloseIcon size="sm" />
</IconButton><IconButton disabled label="Close">
<CloseIcon size="sm" />
</IconButton><IconButton
label="Close"
renderItem={({
className,
children,
'aria-label': ariaLabel,
triggerProps,
}) => (
<a
aria-label={ariaLabel}
className={className}
href="https://example.com"
{...triggerProps}
>
{children}
</a>
)}
>
<CloseIcon size="sm" />
</IconButton>