CraftReactNative Documentation

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

Installation

npx @craftreactnative/ui add ButtonRound

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; iconColor: string; }) => ReactElement<unknown, string \| JSXElementConstructor<any>>`	-
`size?`	`Size`	`'medium'`
`variant?`	`"default" \| "accent" \| "reversed"`	`'default'`
`intent?`	`Intent`	`'primary'`

Dependencies

1 packages

react-native-unistyles

ButtonRound

Installation

Usage

Props

Dependencies

On this page