Skip to content

create documentation of button component #22

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.

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

Closed
wants to merge 2 commits into from
Closed
Changes from all commits
Commits
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
132 changes: 132 additions & 0 deletions docs/button.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,3 +3,135 @@ id: button
title: Button
wip: true
---

A basic button component that should render nicely on any platform. Supports a minimal level of customization.

If this button doesn't look right for your app, you can build your own button using [Pressable](pressable).

```res
<Button
onPress={onPressLearnMore}
title="Learn More"
color="#841584"
accessibilityLabel="Learn more about this purple button"
/>
```

## Example

```res
open ReactNative

let styles = {
open Style
StyleSheet.create({
"title": textStyle(~fontSize=24., ~fontWeight=#_600, ()),
})
}

@react.component
let app = () => {
<SafeAreaView>
<StatusBar />
<ScrollView contentInsetAdjustmentBehavior=#automatic>
<Text style={styles["title"]}> {"Button component"->React.string} </Text>
<Button
onPress={(_) =>
Alert.alert(
~title="Button pressed",
~message="The button is pressed and show this alert",
(),
)
}
title="Press me"
color="#841584"
accessibilityLabel="Learn more about this purple button"
/>
<Button
title="Press me"
color="#f194ff"
onPress={(_) =>
Alert.alert(
~title="Button pressed",
~message="Button with adjusted color pressed",
(),
)
}
/>
</ScrollView>
</SafeAreaView>
}
```

---

# Reference

## Props

### Required **`onPress`**

Handler to be called when the user taps the button.

| Type |
| ---------------------------------- |
| function(PressEvent) |

---

### Required **`title`**

Text to display inside the button. On Android the given title will be converted to the uppercased form.

| Type |
| ------ |
| string |

---

### `accessibilityLabel`

Text to display for blindness accessibility features.

| Type |
| ------ |
| string |

---

### `color`

Color of the text (iOS), or background color of the button (Android).

| Type | Default |
| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| colors in hex |

---

### `disabled`

If `true`, disable all interactions for this component.

| Type | Default |
| ---- | ------- |
| bool | `false` |

---
### `testID`

Used to locate this view in end-to-end tests.

| Type |
| ------ |
| string |

---

### `touchSoundDisabled` <div class="label android">Android</div>

If `true`, doesn't play system sound on touch.

| Type | Default |
| ------- | ------- |
| boolean | `false` |