Actions

IButton

The standard action control. Four variants, five sizes, and polymorphic — it can render as an anchor, a router link, or anything else.

Sizes

States

loading shows a spinner and disables the button. disabled does the latter only.

Block and square

block fills the width of its container. square drops the horizontal padding for an icon-only button — pair it with an aria-label, since there is no text to name it.

aria-label is the only thing naming a square button, so give every one of them a label.

Polymorphic

as changes the rendered element; asChild renders your own child instead, keeping the styling and passing the props down. Use asChild for a RouterLink.

A link that looks like a button

Overriding styles

class is merged with the built-in classes, so a conflicting utility replaces the built-in one rather than sitting beside it:

Props

Prop	Type	Default	Description
`variant`	`'solid' \| 'outline' \| 'ghost' \| 'link'`	`'solid'`	Visual weight
`size`	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`	`'md'`	Control scale
`loading`	`boolean`	`false`	Spinner, and disables the button
`disabled`	`boolean`	`false`	Disables without a spinner
`block`	`boolean`	`false`	Fills the container width
`square`	`boolean`	`false`	Equal padding, for icon-only buttons
`as`	`string`	`'button'`	Element to render
`asChild`	`boolean`	`false`	Render the child instead, forwarding props
`type`	`'button' \| 'submit' \| 'reset'`	`'button'`	Native button type
`unstyled`	`boolean`	—	Drop built-in classes
`class`	`string`	—	Merged with the built-in classes

size is inherited from an enclosing IButtonGroup when it isn't set explicitly.

For an icon beside a label, mark it with data-icon and the padding tightens on that side:

vue

<IButton>
  <SendIcon data-icon="inline-start" />
  Send invoice
</IButton>

<IButton variant="outline">
  Next
  <ArrowRightIcon data-icon="inline-end" />
</IButton>

IButton ​

Sizes ​

States ​

Block and square ​

Polymorphic ​

Overriding styles ​

Props ​