IconButton
A pressable, icon-only button with six visual variants and five sizes, mirroring Button's token-driven styling. Vajra UI ships no bundled icons: icon accepts any component matching TVajraIconComponent. The examples below use @devraj-labs/vajra-ui-icons, a small set of Lucide icons pre-adapted to that contract.
Variants
import { BellIcon } from '@devraj-labs/vajra-ui-icons';
<IconButton variant="solid" icon={BellIcon} onPress={() => {}} />
<IconButton variant="outline" icon={BellIcon} onPress={() => {}} />
Sizes
Loading & disabled
<IconButton icon={BellIcon} isLoading onPress={() => {}} />
<IconButton icon={BellIcon} isDisabled onPress={() => {}} />
Props
| Prop | Type | Default | Description |
|---|---|---|---|
icon | TVajraIconComponent | Required. Icon component to render; size and color are injected automatically. | |
iconColor | TVajraColors | Overrides the color resolved from variant. | |
variant | 'solid' | 'subtle' | 'surface' | 'outline' | 'ghost' | 'plain' | 'solid' | Visual style. |
size | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'md' | Container and icon size. |
isDisabled | boolean | false | Disables interaction and dims opacity. |
isLoading | boolean | false | Shows a spinner in place of the icon. |
loading | { loader?: ReactNode } | Customize the loading spinner. |
Also accepts all Pressable props (bg, borderColor, spacing, etc.) except disabled; use isDisabled instead.