### Button Component Example (Without better-styled)

Source: https://better-styled.com/introduction/index

Demonstrates manual prop drilling for styling child components within a Button. This approach requires explicitly passing size and variant props to each child element, leading to repetition and potential errors.

```tsx
import React from 'react';

// Assuming Button, ButtonIcon, ButtonText are defined elsewhere

function MyComponent() {
  return (
    <Button size="lg" variant="primary">
      <ButtonIcon size="lg" variant="primary" name="check" />
      <ButtonText size="lg" variant="primary">Submit</ButtonText>
    </Button>
  );
}
```

--------------------------------

### Button Component Example (With better-styled)

Source: https://better-styled.com/introduction/index

Illustrates how better-styled simplifies styling by enabling automatic inheritance of variants from parent to child components. This reduces code repetition and improves maintainability.

```tsx
import React from 'react';

// Assuming Button is a compound component created with better-styled

function MyComponent() {
  return (
    <Button size="lg" variant="primary">
      <Button.Icon name="check" />
      <Button.Label>Submit</Button.Label>
    </Button>
  );
}
```

--------------------------------

### Creating a Styled Button with Variant Propagation (better-styled)

Source: https://better-styled.com/introduction/index

Provides a comprehensive example of creating a reusable Button component using better-styled. It demonstrates defining variants, creating parent and child styled components, and exporting them as a compound component for automatic context propagation.

```tsx
import { createStyledContext, styled, withSlots } from "better-styled";
import { Pressable, Text } from "react-native";

// 1. Define your variants
const ButtonContext = createStyledContext({
  size: ["sm", "md", "lg"],
  variant: ["primary", "secondary"],
});

// 2. Create the parent component
const ButtonRoot = styled(Pressable, {
  context: ButtonContext,
  base: { className: "rounded-lg items-center justify-center" },
  variants: {
    size: {
      sm: { className: "px-3 py-1.5" },
      md: { className: "px-4 py-2" },
      lg: { className: "px-6 py-3" },
    },
    variant: {
      primary: { className: "bg-blue-600" },
      secondary: { className: "bg-gray-600" },
    },
  },
});

// 3. Create child that inherits from context
const ButtonLabel = styled(Text, {
  context: ButtonContext,
  base: { className: "font-medium text-white" },
  variants: {
    size: {
      sm: { className: "text-sm" },
      md: { className: "text-base" },
      lg: { className: "text-lg" },
    },
  },
});

// 4. Export as compound component
export const Button = withSlots(ButtonRoot, {
  Label: ButtonLabel,
});

// Usage example:
// <Button size="lg" variant="primary">
//   <Button.Label>Click me</Button.Label>
// </Button>
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.