Skip to content

chore: aligning readmes for react native components #787

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
georgewrmarshall wants to merge 9 commits into
base: main
Choose a base branch
from
Draft

chore: aligning readmes for react native components #787

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
3cd55ea
Update component READMEs with consistent structure and improved docum…
cursoragent Jul 18, 2025
8fde150
chore: update component READMEs with consistent structure and improve…
georgewrmarshall Jul 18, 2025
382b4e4
chore: aligning descriptions
georgewrmarshall Jul 21, 2025
55d97ef
chore: aligning descriptions
georgewrmarshall Jul 21, 2025
93e7a67
chore: updates to button variants
georgewrmarshall Jul 21, 2025
c272bc3
chore: fixing incorrect updates
georgewrmarshall Jul 21, 2025
7cf0de3
chore: fixing incorrect updates
georgewrmarshall Jul 21, 2025
73f19b6
chore: updates
georgewrmarshall Jul 21, 2025
3dc3bf4
chore: update
georgewrmarshall Jul 21, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
chore: updates to button variants
  • Loading branch information
@georgewrmarshall
georgewrmarshall committed Jul 21, 2025
commit 93e7a67e36befb1624d734a8421b98e12eaa9b05
112 changes: 89 additions & 23 deletions ...sign-system-react-native/src/components/Button/variants/ButtonPrimary/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,12 @@

`ButtonPrimary` is a button for most important and desired action to guide the user.

```tsx
import { ButtonPrimary } from '@metamask/design-system-react-native';

<ButtonPrimary onPress={() => {}}>Click Me</ButtonPrimary>;
```

## Props

### `children`
Expand All @@ -12,6 +18,24 @@ The content to display inside the button.
| ----------------- | ------------ | ----------- |
| `React.ReactNode` | Yes | `undefined` |

```tsx
<ButtonPrimary onPress={() => {}}>Button Content</ButtonPrimary>
```

### `onPress`

Function to trigger when the button is pressed.

| **Type** | **Required** | **Default** |
| ------------ | ------------ | ----------- |
| `() => void` | Yes | `undefined` |

```tsx
<ButtonPrimary onPress={() => console.log('Primary button pressed!')}>
Click Me
</ButtonPrimary>
```

### `size`

Defines the size of the button.
Expand All @@ -20,6 +44,11 @@ Defines the size of the button.
| ------------ | ------------ | --------------- |
| `ButtonSize` | No | `ButtonSize.Lg` |

```tsx
<ButtonPrimary size={ButtonSize.Sm} onPress={() => {}}>Small Button</ButtonPrimary>
<ButtonPrimary size={ButtonSize.Lg} onPress={() => {}}>Large Button</ButtonPrimary>
```

### `isLoading`

Indicates whether the button is in a loading state. If `true`, a spinner is displayed, and the button's content is hidden.
Expand All @@ -28,6 +57,12 @@ Indicates whether the button is in a loading state. If `true`, a spinner is disp
| --------- | ------------ | ----------- |
| `boolean` | No | `false` |

```tsx
<ButtonPrimary isLoading onPress={() => {}}>
Loading Button
</ButtonPrimary>
```

### `loadingText`

Text to display alongside the spinner when the button is loading.
Expand All @@ -36,6 +71,12 @@ Text to display alongside the spinner when the button is loading.
| -------- | ------------ | ----------- |
| `string` | No | `undefined` |

```tsx
<ButtonPrimary isLoading loadingText="Loading..." onPress={() => {}}>
Button with Loading Text
</ButtonPrimary>
```

### `isDisabled`

Disables the button, preventing interaction.
Expand All @@ -44,6 +85,12 @@ Disables the button, preventing interaction.
| --------- | ------------ | ----------- |
| `boolean` | No | `false` |

```tsx
<ButtonPrimary isDisabled onPress={() => {}}>
Disabled Button
</ButtonPrimary>
```

### `isDanger`

Renders the button in a danger style to indicate destructive actions.
Expand All @@ -52,6 +99,12 @@ Renders the button in a danger style to indicate destructive actions.
| --------- | ------------ | ----------- |
| `boolean` | No | `false` |

```tsx
<ButtonPrimary isDanger onPress={() => {}}>
Danger Button
</ButtonPrimary>
```

### `isInverse`

Renders the button with inverted colors for use on dark backgrounds.
Expand All @@ -60,6 +113,12 @@ Renders the button with inverted colors for use on dark backgrounds.
| --------- | ------------ | ----------- |
| `boolean` | No | `false` |

```tsx
<ButtonPrimary isInverse onPress={() => {}}>
Inverse Button
</ButtonPrimary>
```

### `startIconName`

Name of the icon to display at the start of the button.
Expand All @@ -68,6 +127,12 @@ Name of the icon to display at the start of the button.
| -------- | ------------ | ----------- |
| `string` | No | `undefined` |

```tsx
<ButtonPrimary startIconName="add" onPress={() => {}}>
Button with Start Icon
</ButtonPrimary>
```

### `endIconName`

Name of the icon to display at the end of the button.
Expand All @@ -76,6 +141,12 @@ Name of the icon to display at the end of the button.
| -------- | ------------ | ----------- |
| `string` | No | `undefined` |

```tsx
<ButtonPrimary endIconName="check" onPress={() => {}}>
Button with End Icon
</ButtonPrimary>
```

### `twClassName`

TailwindCSS class names to apply custom styling.
Expand All @@ -84,6 +155,12 @@ TailwindCSS class names to apply custom styling.
| -------- | ------------ | ----------- |
| `string` | No | `undefined` |

```tsx
<ButtonPrimary twClassName="shadow-lg" onPress={() => {}}>
Custom Styled Button
</ButtonPrimary>
```

### `style`

Custom styles to apply to the button.
Expand All @@ -92,30 +169,19 @@ Custom styles to apply to the button.
| ---------------------- | ------------ | ----------- |
| `StyleProp<ViewStyle>` | No | `undefined` |

## Usage

```tsx
import React from 'react';
import ButtonPrimary from './ButtonPrimary';

const App = () => {
return (
<ButtonPrimary
size="lg"
isLoading={false}
loadingText="Loading..."
startIconName="add"
endIconName="check"
isDanger={false}
isInverse={false}
onPress={() => console.log('Primary button pressed!')}
>
Click Me
</ButtonPrimary>
);
};

export default App;
const styles = StyleSheet.create({
custom: {
marginVertical: 8,
marginHorizontal: 16,
},
});

export const StyleExample = () => (
<ButtonPrimary style={styles.custom} onPress={() => {}}>
Custom Styled Button
</ButtonPrimary>
);
```

## Notes
Expand Down
112 changes: 89 additions & 23 deletions ...gn-system-react-native/src/components/Button/variants/ButtonSecondary/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,12 @@

`ButtonSecondary` is a button for additional options that are helpful.

```tsx
import { ButtonSecondary } from '@metamask/design-system-react-native';

<ButtonSecondary onPress={() => {}}>Click Me</ButtonSecondary>;
```

## Props

### `children`
Expand All @@ -12,6 +18,24 @@ Content to display inside the button.
| ----------------- | ------------ | ----------- |
| `React.ReactNode` | Yes | `undefined` |

```tsx
<ButtonSecondary onPress={() => {}}>Button Content</ButtonSecondary>
```

### `onPress`

Function to trigger when the button is pressed.

| **Type** | **Required** | **Default** |
| ------------ | ------------ | ----------- |
| `() => void` | Yes | `undefined` |

```tsx
<ButtonSecondary onPress={() => console.log('Secondary button pressed!')}>
Click Me
</ButtonSecondary>
```

### `size`

Defines the size of the button.
Expand All @@ -20,6 +44,11 @@ Defines the size of the button.
| ------------ | ------------ | --------------- |
| `ButtonSize` | No | `ButtonSize.Lg` |

```tsx
<ButtonSecondary size={ButtonSize.Sm} onPress={() => {}}>Small Button</ButtonSecondary>
<ButtonSecondary size={ButtonSize.Lg} onPress={() => {}}>Large Button</ButtonSecondary>
```

### `isLoading`

Indicates whether the button is in a loading state. If `true`, a spinner is displayed, and the button's content is hidden.
Expand All @@ -28,6 +57,12 @@ Indicates whether the button is in a loading state. If `true`, a spinner is disp
| --------- | ------------ | ----------- |
| `boolean` | No | `false` |

```tsx
<ButtonSecondary isLoading onPress={() => {}}>
Loading Button
</ButtonSecondary>
```

### `loadingText`

Text to display alongside the spinner when the button is loading.
Expand All @@ -36,6 +71,12 @@ Text to display alongside the spinner when the button is loading.
| -------- | ------------ | ----------- |
| `string` | No | `undefined` |

```tsx
<ButtonSecondary isLoading loadingText="Loading..." onPress={() => {}}>
Button with Loading Text
</ButtonSecondary>
```

### `isDisabled`

Disables the button, preventing interaction.
Expand All @@ -44,6 +85,12 @@ Disables the button, preventing interaction.
| --------- | ------------ | ----------- |
| `boolean` | No | `false` |

```tsx
<ButtonSecondary isDisabled onPress={() => {}}>
Disabled Button
</ButtonSecondary>
```

### `isDanger`

Renders the button in a danger style to indicate destructive actions.
Expand All @@ -52,6 +99,12 @@ Renders the button in a danger style to indicate destructive actions.
| --------- | ------------ | ----------- |
| `boolean` | No | `false` |

```tsx
<ButtonSecondary isDanger onPress={() => {}}>
Danger Button
</ButtonSecondary>
```

### `isInverse`

Renders the button with inverted colors for use on dark backgrounds.
Expand All @@ -60,6 +113,12 @@ Renders the button with inverted colors for use on dark backgrounds.
| --------- | ------------ | ----------- |
| `boolean` | No | `false` |

```tsx
<ButtonSecondary isInverse onPress={() => {}}>
Inverse Button
</ButtonSecondary>
```

### `startIconName`

Name of the icon to display at the start of the button.
Expand All @@ -68,6 +127,12 @@ Name of the icon to display at the start of the button.
| -------- | ------------ | ----------- |
| `string` | No | `undefined` |

```tsx
<ButtonSecondary startIconName="add" onPress={() => {}}>
Button with Start Icon
</ButtonSecondary>
```

### `endIconName`

Name of the icon to display at the end of the button.
Expand All @@ -76,6 +141,12 @@ Name of the icon to display at the end of the button.
| -------- | ------------ | ----------- |
| `string` | No | `undefined` |

```tsx
<ButtonSecondary endIconName="check" onPress={() => {}}>
Button with End Icon
</ButtonSecondary>
```

### `twClassName`

TailwindCSS class names to apply custom styling.
Expand All @@ -84,6 +155,12 @@ TailwindCSS class names to apply custom styling.
| -------- | ------------ | ----------- |
| `string` | No | `undefined` |

```tsx
<ButtonSecondary twClassName="shadow-lg" onPress={() => {}}>
Custom Styled Button
</ButtonSecondary>
```

### `style`

Custom styles to apply to the button.
Expand All @@ -92,30 +169,19 @@ Custom styles to apply to the button.
| ---------------------- | ------------ | ----------- |
| `StyleProp<ViewStyle>` | No | `undefined` |

## Usage

```tsx
import React from 'react';
import ButtonSecondary from './ButtonSecondary';

const App = () => {
return (
<ButtonSecondary
size="large"
isLoading={false}
loadingText="Loading..."
startIconName="add"
endIconName="check"
isDanger={false}
isInverse={false}
onPress={() => console.log('Secondary button pressed!')}
>
Click Me
</ButtonSecondary>
);
};

export default App;
const styles = StyleSheet.create({
custom: {
marginVertical: 8,
marginHorizontal: 16,
},
});

export const StyleExample = () => (
<ButtonSecondary style={styles.custom} onPress={() => {}}>
Custom Styled Button
</ButtonSecondary>
);
```

## Notes
Expand Down
Loading
Loading