Lynx UI Button

lynx-ui-button SKILL

Button is a member of the lynx-ui atomic library. It provides an unstyled, fully functional button "skeleton", focusing on handling interaction behaviors and accessibility.

1. Core Capabilities

Unlike lynx-ui-button, which is a high-level component providing complete styling and multiple variants, the goal of Button is to:

• Provide core button behavior: Encapsulates onClick events, disabled state, and the active state during press (active state).
• Complete style freedom: Comes with no background, border, color, or other styles, allowing developers to build buttons of any appearance from scratch.
• Expose state via Render Props: It exposes whether the button is in the "pressed" state (active) through the children Render Prop pattern, facilitating the implementation of complex press effects.

When you need an interactive element that is visually completely custom but behaviorally conforms to standard button specifications, you should use Button.

2. AI Coding Guide

Minimal Usable Example

The core feature of Button is its Render Prop. You need to provide a function as children to receive the active state.

import { Button } from '@lynx-js/lynx-ui'

function App() {
  const handleClick = () => {
    console.log('Button clicked!')
  }

  return (
    <Button
      {({ active }) => (
        <view
          style={{
            padding: '10px 20px',
            backgroundColor: active ? '#cccccc' : '#eeeeee',
            border: '1px solid #999999',
            borderRadius: 4,
          }}
        >
          <text>My Custom Button</text>
        </view>
      )}
    </Button>
  )
}

Recommended Prompt Formula

Scenario: I want to use Button to create a custom button. Appearance Requirement: This button's background color is [normal_color] in its normal state, and when the user presses it (active state), the background color changes to [active_color]. Behavior Requirement: In the [enabled/disabled] state, the button needs to [perform some action, e.g., "print a log"] when clicked.

Example Prompt:

I want to use Button to create an icon button. It should be a circular button with no background color. When the user presses it, the entire button area's background should become semi-transparent gray (rgba(0,0,0,0.1)). When the button is clicked, it should call the handleIconClick function. Please provide the implementation code.

4. FAQ

Q: Why doesn’t the button react to the active state?

A: Button uses a Render Prop. Provide a function as children so you can receive { active } and style accordingly.

// Correct usage
<Button
  {({ active }) => (
    <view style={{ backgroundColor: active ? '#ccc' : '#eee' }}>
      <text>My Button</text>
    </view>
  )}
</Button>

Q: How do I handle disabled styles?

A: disabled prevents onClick from firing but doesn’t auto-style the button. Pass disabled into your style logic and apply the visual state manually.

<Button disabled={true}
  {({ active }) => (
    <view style={{ opacity: 0.5 }}>
      <text>Disabled Button</text>
    </view>
  )}
</Button>

3. Use Cases & Best Practices

Scenario 1: Building a unique button in a design system

When your design system requires a button with a completely new look and feel that cannot be met by overriding the styles of lynx-ui-button.

// GradientButton.tsx
const GradientButton = ({ children, onClick }) => (
  <Button
    {({ active }) => (
      <view
        style={{
          background: active
            ? 'linear-gradient(to right, #ff7e5f, #feb47b)'
            : 'linear-gradient(to right, #6a11cb, #2575fc)',
          color: 'white',
          padding: '12px 24px',
          borderRadius: 50,
          boxShadow: active ? 'none' : '0 4px 15px rgba(0,0,0,0.2)',
          transition: 'all 0.2s',
        }}
      >
        {children}
      </view>
    )}
  </Button>
)

Practice: With the active state, you can easily implement complex press effects, such as changing gradients, shadows, scaling, etc.

5. Sub components

Button is a single component and does not contain sub components.