mirror of
https://github.com/hanzoai/branding.git
synced 2026-10-30 18:46:35 +00:00
- src/tg: createTamaguiConfig → createGuiConfig - src/tg/types.ts: TamaguiConfigOptions → GuiConfigOptions - README.md, COMPONENTS.md: 'Tamagui' prose → @hanzo/gui
1.5 KiB
1.5 KiB
Components
Themed components built on @hanzo/gui and aware of our theming mechanism, so they work with any palette — not just primary.
import { ThemedButton, StatusBox, ToggleSwitch } from '@hanzo/branding/tg-components'
ThemedButton
Solid color button. Defaults to theme="primary".
<ThemedButton onPress={handleSubmit}>Submit</ThemedButton>
<ThemedButton theme="danger" onPress={handleDelete}>Delete</ThemedButton>
<ThemedButton theme={null}>Cancel</ThemedButton>
GhostButton
Borderless button that reveals border + tint on hover/press.
<GhostButton onPress={handleAlt}>Try another way</GhostButton>
OutlineButton
Outlined button with border and subtle background.
<OutlineButton onPress={handleCancel}>Cancel</OutlineButton>
StatusBox
Callout box for tips, errors, warnings. Takes a theme name and bullet points.
<StatusBox title="Tip" points={['First point', 'Second point']} />
<StatusBox title="Error" points={['Something broke']} theme="danger" symbol="⚠️" />
<StatusBox title="Done" points={['All set']} theme="success" symbol="✓" />
ToggleSwitch
Branded toggle. Uses the theme palette when checked, neutral when unchecked.
<ToggleSwitch checked={value} onCheckedChange={setValue} />
<ToggleSwitch checked={value} onCheckedChange={setValue} theme="success" />
StyledCard
Pressable card with optional icon slots.
<StyledCard
title="Bank Account"
subtitle="Chase ••1234"
iconLeft={<BankIcon />}
onPress={handleSelect}
/>