Button

A Button is the Button primitive with a look. On the Web it is a real <button>, or an <a> when it has an href; on React Native it is a Pressable with the button role.

AccentNeutralQuietDangerSmallDisabled

Last pressed: nothing yet

ButtonDemo.tsx

import { Text, View } from '@hozo/core'
import { Button } from '@hozo/ui'
import { useState } from 'react'

export function ButtonDemo() {
  const [pressed, setPressed] = useState('nothing yet')
  return (
    <View className="gap-4">
      <View className="flex-row flex-wrap gap-2">
        <Button tone="accent" onPress={() => setPressed('Accent')}>
          Accent
        </Button>
        <Button tone="neutral" onPress={() => setPressed('Neutral')}>
          Neutral
        </Button>
        <Button tone="quiet" onPress={() => setPressed('Quiet')}>
          Quiet
        </Button>
        <Button tone="danger" onPress={() => setPressed('Danger')}>
          Danger
        </Button>
        <Button tone="accent" size="sm" onPress={() => setPressed('Small')}>
          Small
        </Button>
        <Button tone="neutral" disabled onPress={() => setPressed('Disabled')}>
          Disabled
        </Button>
      </View>
      <Text className="text-sm text-hozo-text-muted">Last pressed: {pressed}</Text>
    </View>
  )
}

• tone: accent, neutral (the default), quiet or danger. Use one accent per view, for the action the view is for.
• size: md (the default, 44px tall) or sm (36px). Both are larger than the 24px WCAG 2.5.8 asks for.
• disabled: sets the real disabled attribute, and the disabled look is styled from that attribute, so the two cannot disagree.
• href: makes it a link that looks like a button.

Everything else, such as onPress and accessibilityLabel, is the primitive’s and passes straight through.