Fulldev UI

Docs Components Blocks
Docs Components Blocks
Overview
Introduction Installation Integration Theming Frameworks
Typography
Heading Label Link List Text
Base
Badge Button Card Checkbox Icon Input Rating Section Select Table Textarea
Structure
Carousel Column Grid Masonry Split Spread

Button

Button 
---
import Button from 'fulldev-ui/components/Button.astro'
---

<Button color="brand">Button</Button>

Props

PropTypeDefault
variant'primary' | 'secondary' | 'tertiary'primary
radius'none' | 'auto' | 'full'auto
size'sm' | 'md' | 'lg'-
color'base' | 'brand'-
contrastboolean-
avatarstring-
iconstring-
htmlstring-
textstring-
asHTMLTaga
HTML AttributesPolymorphic<a>-

Examples

Button Button Button 
---
import Button from 'fulldev-ui/components/Button.astro'
---

<Button variant="primary">Button</Button>
<Button variant="secondary">Button</Button>
<Button variant="tertiary">Button</Button>
Button 
---
import Button from 'fulldev-ui/components/Button.astro'
---

<Button icon="circle" set:html="Button" set:html="Buttontje" />
Button Button Button 
---
import Button from 'fulldev-ui/components/Button.astro'
---

<Button size="sm" set:html="Button" />
<Button size="md" set:html="Button" />
<Button size="lg" set:html="Button" />
Button Button 
---
import Button from 'fulldev-ui/components/Button.astro'
---

<Button color="base" set:html="Button" />
<Button color="brand" set:html="Button" />
Button Button Button 
---
import Button from 'fulldev-ui/components/Button.astro'
---

<Button radius="none" set:html="Button" />
<Button radius="auto" set:html="Button" />
<Button radius="full" set:html="Button" />