mirror of
https://github.com/hanzoai/gui.git
synced 2026-10-25 02:31:41 +00:00
zeekayandHanzo Dev
751ef5c778
Both old names are owned by a different npm account (artemis-prime), so publishing them returns 403 — which is how this surfaced: the 8.0.0 run shipped @hanzogui/logo and @hanzogui/demos depending on [email protected], a version that cannot be published and therefore does not exist. Those two were uninstallable. @hanzo/gui and @hanzogui/* are ours, so the framework now carries the name it is imported by everywhere downstream, and the loader moves under the scope we control. The rewrite is limited to package references. `DEBUG?.startsWith('hanzogui')` is a log-namespace filter and join(dir, 'hanzogui') is a path — rewriting either would change behaviour, so both are untouched. Co-authored-by: Hanzo Dev <[email protected]>
147 lines
3.6 KiB
Plaintext
147 lines
3.6 KiB
Plaintext
---
|
|
title: Button
|
|
description: A simple button component
|
|
name: button
|
|
component: Button
|
|
demoName: Button
|
|
---
|
|
|
|
# Button
|
|
|
|
<Description>A simple, sizable button.</Description>
|
|
|
|
<HeroContainer demoMultiple>
|
|
<ButtonDemo />
|
|
</HeroContainer>
|
|
|
|
```tsx hero template=Button
|
|
|
|
```
|
|
|
|
<Highlights
|
|
features={[
|
|
'Accepts size prop that works on all styles.',
|
|
'Can inverse theme with themeInverse.',
|
|
'Place an icon before or after.',
|
|
]}
|
|
/>
|
|
|
|
### Usage
|
|
|
|
```tsx
|
|
import { Button } from '@hanzo/gui'
|
|
|
|
export default () => <Button>Lorem ipsum</Button>
|
|
```
|
|
|
|
### Sizing
|
|
|
|
Sizing buttons provides a unique challenge especially for a compiler, because
|
|
you need to adjust many different properties - not just on the outer frame, but
|
|
on the text wrapped inside. Gui supports adjusting the padding, border
|
|
radius, font size and icons sizes all in one with the `size` prop.
|
|
|
|
```tsx
|
|
import { Button } from '@hanzo/gui'
|
|
|
|
export default () => <Button size="$6">Lorem ipsum</Button>
|
|
```
|
|
|
|
Given your theme defines a size `6`, the button will adjust all of the
|
|
properties appropriately. You can also pass a plain number to get an arbitrary
|
|
size.
|
|
|
|
### Icon Theming
|
|
|
|
You can pass icons as either elements or components. If passing components,
|
|
Gui will automatically pass the `size` and `color` prop to them based on
|
|
your theme.
|
|
|
|
### Button props
|
|
|
|
Button extends View, inheriting all the
|
|
[Gui standard props](/docs/intro/props), plus:
|
|
|
|
<PropsTable
|
|
data={[
|
|
{
|
|
name: 'size',
|
|
required: false,
|
|
type: 'string | tokens.size',
|
|
description: `Set a size, number or one of the size token values.`,
|
|
},
|
|
{
|
|
name: 'theme',
|
|
required: false,
|
|
type: 'string',
|
|
description: `Apply a theme just to the button and it's children`,
|
|
},
|
|
{
|
|
name: 'themeInverse',
|
|
required: false,
|
|
type: 'boolean',
|
|
description: `Helpful for "flipping" any theme between dark and light (including flipping a sub themes defined as [subtheme]-[dark/light]`,
|
|
},
|
|
{
|
|
name: 'noTextWrap',
|
|
required: false,
|
|
type: 'boolean',
|
|
description: `If true, Button won't wrap content with a Text element.`,
|
|
},
|
|
{
|
|
name: 'icon',
|
|
required: false,
|
|
type: 'JSX.Element',
|
|
description: `Pass any React element, appears before the text.`,
|
|
},
|
|
{
|
|
name: 'iconAfter',
|
|
required: false,
|
|
type: 'JSX.Element',
|
|
description: `Pass any React element, appears after the text.`,
|
|
},
|
|
{
|
|
name: 'scaleIcon',
|
|
required: false,
|
|
type: 'number',
|
|
description: `Scale the icon more than usual by this number.`,
|
|
},
|
|
{
|
|
name: 'scaleSpace',
|
|
required: false,
|
|
type: 'number',
|
|
description: `Scale the spacing more than usual by this number.`,
|
|
},
|
|
{
|
|
name: 'spaceFlex',
|
|
required: false,
|
|
type: `boolean`,
|
|
description: `Makes all space elements have a flex.`,
|
|
},
|
|
{
|
|
name: 'color',
|
|
required: false,
|
|
type: `SizableTextProps['color']`,
|
|
description: `Passes "color" down to the inner text component`,
|
|
},
|
|
{
|
|
name: 'fontWeight',
|
|
required: false,
|
|
type: `SizableTextProps['fontWeight']`,
|
|
description: `Passes "fontWeight" down to the inner text component`,
|
|
},
|
|
{
|
|
name: 'letterSpacing',
|
|
required: false,
|
|
type: `SizableTextProps['letterSpacing']`,
|
|
description: `Passes "letterSpacing" down to the inner text component`,
|
|
},
|
|
{
|
|
name: 'textAlign',
|
|
required: false,
|
|
type: `SizableTextProps['textAlign']`,
|
|
description: `Passes "textAlign" down to the inner text component`,
|
|
},
|
|
]}
|
|
/>
|