Skip to main content

Button

A button is a component that users can click or tap to initiate an action.

Apple Image

Usage​

import {Button} from "@/components";
import React from "react";

const HomeScreen = () => {
  return (
    <Button>
      <Button.Text title="Default" />
    </Button>
  );
};

export default HomeScreen;

Props​

variant​

Type: 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'white' | 'black'

The varinat determines its color, allowing you to align its appearance with its priority or context:

<Button variant="black">
  <Button.Text title="Black Button" />
</Button>

size​

Type: 'sm' | 'md' | 'lg'

The size prop controls the size of the button, making it suitable for different layouts and contexts.

  • sm: Small-sized button.
  • md: Medium-sized button (default).
  • lg: Large-sized button.
<Button size="sm">
  <Button.Text title="Small Button" />
</Button>

type​

Type: 'contained' | 'outlined' | 'text'

The type prop defines the button's visual style:

  • contained: A filled button with a background color.
  • outlined: A button with an outline and no background color.
  • text: A flat button with no background or border, useful for minimalistic designs.
<Button type="outlined">
  <Button.Text title="Outlined Button" />
</Button>

disabled​

Type: boolean

The disabled prop determines whether the button is interactive or not. A disabled button cannot be pressed by onpress.

<Button variant="secondary" disabled type="text">
  <Button.Text title="Disabled" />
</Button>

loading​

Type: boolean

The loading prop displays a loading indicator inside the button, indicating an ongoing action.

<Button loading>
  <Button.Text title="Disabled" />
</Button>

onPress​

Type: (e: GestureResponderEvent) => void

Function to execute on press.

children (required)​

Type: React.ReactNode