Component

Button

Primary action component with variants, icons, loading, disabled, and custom colors.

React Native

Button variants

Primary, secondary, outline, and loading states.

import { useState } from 'react';
import { Button, toast } from '@sohantalukder/rn-kit';

export function SaveButton() {
  const [isSaving, setIsSaving] = useState(false);

  const handleSave = () => {
    setIsSaving(true);
    toast.show({ type: 'success', title: 'Saved' });
    setTimeout(() => setIsSaving(false), 800);
  };

  return (
    <Button
      text="Save changes"
      accessibilityLabel="Save changes"
      isLoading={isSaving}
      disabled={isSaving}
      onPress={handleSave}
    />
  );
}

Live component

primarysecondaryoutlineerror

Use one primary button per decision area.
Prefer `isLoading` over changing labels during async work.

Usage

import { Button } from '@sohantalukder/rn-kit';

import { useState } from 'react';
import { Button, toast } from '@sohantalukder/rn-kit';

export function SaveButton() {
  const [isSaving, setIsSaving] = useState(false);

  const handleSave = () => {
    setIsSaving(true);
    toast.show({ type: 'success', title: 'Saved' });
    setTimeout(() => setIsSaving(false), 800);
  };

  return (
    <Button
      text="Save changes"
      accessibilityLabel="Save changes"
      isLoading={isSaving}
      disabled={isSaving}
      onPress={handleSave}
    />
  );
}

Props

These are the most important props to consider first. The custom preview highlights the common setup before you move into app-specific states.

PropTypeDefaultDescription

textstring-Primary text rendered by the component.

variant"primary" | "secondary" | "outline" | "error" | "disable"defaultSelects the visual style variant for the component.

iconIconKey | ReactNode-Icon rendered before content or as the primary visual affordance.

isLoadingbooleanfalseShows a loading indicator and prevents duplicate submissions.

disabledbooleanfalsePrevents interaction and renders the disabled visual state.

onPress() => void-Called when the pressable component is activated.

Theme

Button reads from the rn-kit theme context where applicable. Wrap your app with ThemeProvider and prefer package theme tokens over hardcoded screen-level colors.

Variants

primary
secondary
outline
error
disable

Best Practices

Use one primary button per decision area.
Prefer `isLoading` over changing labels during async work.