Skip to content

Button

A button or a component that looks like a button.


---
import { Button } from 'fulldev-ui'
---
<Button>Button</Button>

Props

icon

Type: icon?: Icon | Icon['name']

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

---
import { Button } from 'fulldev-ui'
---
<Button icon="circle" text="Button" />
<Button text="Button" icon="circle" />
<Button icon={{ name: 'circle', class: 'my-icon' }} />

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

size

Type: size?: 'sm' | 'md' | 'lg'

Sets the size for this component and all its children.

---
import { Button } from 'fulldev-ui'
---
<Button size="sm">Button</Button>
<Button size="md">Button</Button>
<Button size="lg">Button</Button>

density

Type: density?: 'base' | 'compact' | string

Changes the underlying values used by the size prop, for this component and all its children.

For example, we set compact on a card and can now size this and all children automatically based on the size on the wrapping block/section.

Choose a predefined density, or a custom value defined like explained in the theming guide.

---
import { Button } from 'fulldev-ui'
---
<Button density="compact" size="sm">Button</Button>
<Button density="compact" size="md">Button</Button>
<Button density="compact" size="lg">Button</Button>

variant

Type: color?: 'primary' | 'secondary' | 'outline' | 'ghost' = 'primary'

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

---
import { Button } from 'fulldev-ui'
---
<Button variant="primary">Button</Button>
<Button variant="secondary">Button</Button>
<Button variant="outline">Button</Button>
<Button variant="ghost">Button</Button>

theme

Type: theme?: 'light' | 'dark' | string

Changes the colors for this component and all its children.

Choose a predefined theme, or a custom value defined like explained in the theming guide.

text

Type: text?: string

Useful when getting content from Astro content collections or a headless CMS.

html

Type: html?: string

Similar to text prop, but renders HTML. Use this for for <span>, <br>, etc.

as & HTML Attributes

Type: as?: HTMLTag = 'a'

Used to determine which HTML tag is used to render the component.

Based on the value, all HTML attributes of this tag are accepted as props too.

For a detailed explanation see Polymorphic props in the Astro documentation.