CraftReactNative Documentation

A circular button component designed for displaying an icon. Commonly used for navigation actions or action buttons.

Usage

Screen.tsx

import { ButtonRound } from "@/craftrn-ui/components/ButtonRound";
 
export const Screen = () => (
  <ButtonRound
    onPress={() => {}}
    size="small"
    renderIcon={(size) => (
      <ChevronLeft size={size} color={theme.colors.contentPrimary} />
    )}
  />
);

Props

Prop	Type	Default
`onPress?`	`() => void`	-
`disabled?`	`boolean`	`false`
`renderContent`	`(props: { iconSize: number; }) => ReactElement<unknown, string \| JSXElementConstructor<any>>`	-
`size?`	`"large" \| "medium" \| "small"`	`'medium'`
`variant?`	`"primary" \| "secondary"`	`'primary'`

ButtonRound

Usage

Props

On this page