Button

Button is a clickable element. Maps to UI Toolkit's Button.

Import

import { Button } from "onejs-react"

Basic Usage

<Button text="Click me" onClick={() => console.log("Clicked!")} />

Props

Prop	Type	Description
`text`	`string`	Button label
`style`	`ViewStyle`	Inline styles
`className`	`string`	USS class name(s)
`onClick`	`(e) => void`	Click handler

Styled Buttons

// Primary button
<Button
    text="Submit"
    style={{
        backgroundColor: "#0066cc",
        color: "#ffffff",
        paddingTop: 10,
        paddingBottom: 10,
        paddingLeft: 20,
        paddingRight: 20,
        borderRadius: 4,
        borderWidth: 0,
    }}
    onClick={handleSubmit}
/>

// Outline button
<Button
    text="Cancel"
    style={{
        backgroundColor: "transparent",
        borderWidth: 1,
        borderColor: "#666",
        color: "#666",
        paddingTop: 10,
        paddingBottom: 10,
        paddingLeft: 20,
        paddingRight: 20,
        borderRadius: 4,
    }}
    onClick={handleCancel}
/>

Button States

Handle disabled and loading states:

function SubmitButton({ loading, disabled, onSubmit }) {
    return (
        <Button
            text={loading ? "Loading..." : "Submit"}
            style={{
                backgroundColor: disabled ? "#666" : "#0066cc",
                opacity: disabled ? 0.5 : 1,
            }}
            onClick={disabled ? undefined : onSubmit}
        />
    )
}

Button Row

<View style={{ flexDirection: "row" }}>
    <Button text="Save" onClick={handleSave} style={{ marginRight: 10 }} />
    <Button text="Cancel" onClick={handleCancel} />
</View>

With USS

/* buttons.uss */
.btn {
    padding: 10px 20px;
    border-radius: 4px;
    border-width: 0;
}

.btn-primary {
    background-color: #0066cc;
    color: #ffffff;
}

.btn-primary:hover {
    background-color: #0055aa;
}

<Button text="Styled" className="btn btn-primary" onClick={handleClick} />