# Register.EmailForm.RegisterButton

Canonical page: https://docs.ovok.com/native-sdk/guide/components/auth/register/components/form/register-button

The register button component handles form submission with loading states and error display.

## Usage [#usage]

### Basic Implementation [#basic-implementation]

```tsx
import { Register } from "@ovok/native";
import React from "react";

const BasicRegisterButton = () => {
  return (
    <Register.EmailForm>
      <Register.EmailForm.RegisterButton />
    </Register.EmailForm>
  );
};

export default BasicRegisterButton;
```

## Props [#props]

Every prop, with its type and description, is listed in the [`@ovok/native/auth` API reference](/native-sdk/reference/auth).

## Button States [#button-states]

### Normal State [#normal-state]

- Displays "Register" text (from `"register.button"` translation)
- Full width button with contained mode
- Uses theme's primary color

### Loading State [#loading-state]

- Shows loading spinner
- Button is disabled during submission
- Text remains visible alongside spinner

### Error State [#error-state]

- Button returns to normal state
- Error message appears below button
- Uses theme's error color for helper text

## Features [#features]

- **Auto Loading**: Automatically shows loading state during form submission
- **Error Display**: Shows validation and submission errors below button
- **Theme Integration**: Uses theme colors and typography
- **Full Width**: Button spans the full width of its container
- **Accessibility**: Proper button semantics and error announcements
- **TypeScript**: Full type safety for all props

## Default Styles [#default-styles]

### Button Styles [#button-styles]

```tsx
const styles = {
  button: {
    width: "100%",
  },
  buttonText: {
    fontFamily: "DMSans_700Bold",
    fontSize: 16,
    color: theme.colors.onPrimary,
  },
};
```

## Error Handling [#error-handling]

The button automatically displays errors from:

1. **Form Validation**: Field-level validation errors
2. **Submission Errors**: API or network errors
3. **General Errors**: Unexpected errors during registration

Error messages are shown using the `HelperText` component with error styling.

## Localization [#localization]

The button text uses the translation key `"register.button"`. Make sure this key is defined:

```json
{
  "register": {
    "button": "Create Account"
  }
}
```

## Accessibility [#accessibility]

- Proper button role for screen readers
- Loading state announcements
- Error message accessibility
- Keyboard navigation support
- Touch target meets minimum size requirements

## Test IDs [#test-ids]

The component provides several test IDs for testing:

- `${testID}-container`: Button container
- `${testID}-button`: The button element
- `${testID}-helper-text`: Error text (when visible)

Default `testID` is `"register-button"`.

## Form Integration [#form-integration]

The button automatically integrates with the form context:

- Accesses form submission state
- Triggers form validation and submission
- Displays form-level errors
- Manages loading states during async operations

No additional configuration is needed when used within `Register.EmailForm`.