Skip to content
Fulldev UI

Button

A button or a component that looks like a button. 
--- 
import { Button } from 'fulldev-ui'
---

<Button
  variant="solid"
  radius="auto"
  color="brand"
  contrast={false}
  compact={false}
  size="md"
  text="Button"
/>

Props

Prop Type Default
variant solid | soft | surface | outline | ghost solid
radius none | auto | full auto
color base | brand -
contrast boolean -
compact boolean -
size sm | md | lg -
icon Icon['name'] -
text string -
html string -
as HTMLTag a | button
HTML Attributes Polymorphic<as> -

Examples

icon

Either an icon object or a string representing the icon name.

Button Button 
---
import { Button } from 'fulldev-ui'
---


<Button icon="circle" text="Button" />
<Button text="Button" icon="circle" />

All of the icon component props are accepted here as well.

size

The size prop cascades: it is inherited from the parent and it is applied to all children.

Button Button Button 
---
import { Button } from 'fulldev-ui'
---


<Button size="sm">Button</Button>
<Button size="md">Button</Button>
<Button size="lg">Button</Button>

compact

The compact prop changes the underlying values used by the size prop. Just like the size prop it cascades, which means it is inherited from the parent and it is applied to all children.

With the compact prop you are able to use the same component in different contexts, like in a large hero or a small card. It will automatically adapt.

Button Button Button 
---
import { Button } from 'fulldev-ui'
---


<Button compact size="sm">Button</Button>
<Button compact size="md">Button</Button>
<Button compact size="lg">Button</Button>

variant

Sets the color variant used for this component and all its children.

Button Button Button Button Button 
---
import { Button } from 'fulldev-ui'
---


<Button variant="solid">Button</Button>
<Button variant="surface">Button</Button>
<Button variant="soft">Button</Button>
<Button variant="outline">Button</Button>
<Button variant="ghost">Button</Button>