Button

The Button component is a customizable button for React Native that supports various styles and icons. It works in integration with context providers to simplify form handling.

Import

Phaselis exports one main component for Button.

import { Button } from 'phaselis'

• Button: Main Component import for Button

Usage

Basic Button

Put in some content in the Button to get a basic button.

import { Button } from "phaselis";

const Example = () => {
  return <Button text="Phaselis" variation="primary" />;
};

export default Example;

Props

tip

Other than listed props below, you can pass any prop that a Pressable component accepts.

text

string

The text to display in the button.

<Button text="Click me" />

disabled

boolean

If true, the button will be disabled.

<Button disabled />

onClick

((event: GestureResponderEvent) => void) | null | undefined

Function to execute when the button is pressed.

<Button onClick={() => console.log("Button clicked")} />

type

submit | reset | button

If component is used in a form, you can set the type of the button.

<Button type="submit" /> 

style

Name	Type	Description
container	ViewStyle	Style for the outer container
element	ViewStyle	Style for the button element
text	TextStyle	Style for the button text
leftSlot	ViewStyle & TextStyle	Style for the left slot/icon
rightSlot	ViewStyle & TextStyle	Style for the right slot/icon

You can style the button with the style prop.

// Object with named styles
<Button
  style={{
    container: {
      backgroundColor: "#11295a",
      borderColor: "#d8eeff",
    },
    text: {
      color: "#d8eeff",
    },
  }}
  text="Phaselis"
/>

// Direct element styling
<Button
  text="Direct Style"
  style={{ backgroundColor: "#007bff", padding: 15, borderRadius: 8 }}
/>

containerStyle

ViewStyle

Additional style applied directly to the container View.

<Button text="Custom Container" containerStyle={{ marginTop: 10 }} />

textStyle

TextStyle

Additional style applied directly to the button text.

<Button text="Custom Text" textStyle={{ fontWeight: 'bold' }} />

leftSlotStyle

ViewStyle & TextStyle

Additional style applied directly to the left icon or slot.

<Button leftIcon="Check" leftSlotStyle={{ color: 'green' }} text="Approved" />

rightSlotStyle

ViewStyle & TextStyle

Additional style applied directly to the right icon or slot.

<Button rightIcon="ExternalLink" rightSlotStyle={{ color: 'blue' }} text="Visit" />

loading

boolean

If true, the button will show a loading spinner in the left slot.

<Button text="Submitting" loading />  

size

ComponentSize

The size of the button. Default is md.

<Button size="xl" />  

variation

default | primary | primary_outline | secondary | secondary_outline | tertiary | tertiary_outline | danger | success

Determines the style of the button.

• default: Applies the default button style.
• primary: Applies the primary button style.
• primary_outline: Applies the primary button style with an outline.
• secondary: Applies the secondary button style.
• secondary_outline: Applies the secondary button style with an outline.
• tertiary: Applies the tertiary button style.
• tertiary_outline: Applies the tertiary button style with an outline.
• danger: Applies the danger button style.
• success: Applies the success button style.

<Button variation="secondary" />

LeftSlot

ReactNode

You can pass any component to the left slot of the button.

import { LucideIcon } from "phaselis";

<Button LeftSlot={() => <LucideIcon name={"ArrowLeft"} />} />;

RightSlot

ReactNode

You can pass any component to the right slot of the button.

import { LucideIcon } from "phaselis";

<Button RightSlot={() => <LucideIcon name={"ArrowRight"} />} />;

leftIcon

SlotIconName

You can pass any Lucide icon name to the left slot of the button.

<Button leftIcon="ArrowLeft" />

rightIcon

SlotIconName

You can pass any Lucide icon name to the right slot of the button.

<Button rightIcon="ArrowRight" />;

children

ReactNode

You can pass any component to the button.

import { Text } from "react-native";

<Button>
  <Text>Click me</Text>
</Button>