Button
| Prop | Type | Default |
|---|---|---|
| variant | 'solid' | 'soft' | 'surface' | 'outline' | 'ghost' | 'link' | solid |
| size | 'sm' | 'md' | 'lg' | - |
| color | 'base' | 'brand' | - |
| radius | 'none' | 'auto' | 'full' | auto |
| contrast | boolean | - |
| html | string | - |
| text | string | - |
| icon | string | - |
| label | string | - |
| avatar | string | - |
| as | HTMLTag | a |
| HTML Attributes | Polymorphic<a> | - |
Examples
---
import Button from 'fulldev-ui/components/Button.astro'
---
<Button variant="solid" text="Button" />
<Button variant="surface" text="Button" />
<Button variant="soft" text="Button" />
<Button variant="outline" text="Button" />
<Button variant="ghost" text="Button" />
---
import Button from 'fulldev-ui/components/Button.astro'
---
<Button icon="circle" text="Button" />
---
import Button from 'fulldev-ui/components/Button.astro'
---
<Button size="sm" text="Button" />
<Button size="md" text="Button" />
<Button size="lg" text="Button" />
---
import Button from 'fulldev-ui/components/Button.astro'
---
<Button color="base" text="Button" />
<Button color="brand" text="Button" />