Button

import { Button } from 'wisteria-ui';

Variant

Button 共有 5 种样式类型，分别为：Elevated、Filled、Tonal、Outlined、Text。

tsx

<Button>Elevated</Button>
<Button variant="filled">Filled</Button>
<Button variant="tonal">Tonal</Button>
<Button variant="outlined">Outlined</Button>
<Button variant="text">Text</Button>

Variant

Block

tsx

<Button block variant="tonal">
  Block
</Button>

Block

Color

tsx

<Button color="pink">Elevated</Button>
<Button color="green" variant="filled">Filled</Button>
<Button color="cyan" variant="tonal">Tonal</Button>
<Button color="red" variant="outlined">Outlined</Button>
<Button color="orange" variant="text">Text</Button>

Color

Corner

tsx

<Button variant="tonal" corner="square">
  Square
</Button>
<Button variant="tonal" corner="rounded">
  Rounded
</Button>
<Button variant="tonal" corner="circular">
  Circular
</Button>

Color

API

Button 组件支持 html button 所有属性。

属性	说明	类型	默认值
block	是否撑满容器	boolean	-
color	自定义颜色	string	-
corner	设置圆角	square \| rounded \| circular	rounded
variant	按钮类型	elevated \| filled \| tonal \| outlined \| text	elevated

Space Avatar