Tile UI Vue
Source code

Components

Button

A multi-variant action component with loading state and size variants.

Use Button for primary actions, inline confirmations, and lightweight toolbar interactions.

import { Button } from '@tile-ui/vue';
 
export default function ButtonDemo() {
	return (
		<div class="component-preview__stack">
			<div class="button-group">

Registry install

pnpm dlx shadcn@latest add @tile-ui/button

Package usage

import { Button } from '@tile-ui/vue';
 
export default defineComponent({
	setup() {
		return () => <Button>Save changes</Button>;
	},
});

Use the variant prop to change the visual treatment:

<Button variant="outline">Outline</Button>
<Button variant="destructive">Delete</Button>

Use the loading prop to disable interaction and show the inline spinner:

<Button loading>Submitting...</Button>

Highlights

  • Six visual variants
  • Loading state support
  • Eight sizes from xs through icon-lg
  • Fits naturally into slot-based Vue composition

Registry dependencies

Item Purpose
button Component source and module styles
core Framework-agnostic logic helpers
utils Shared utility helpers
styles Shared SCSS tokens and globals

API reference

Button

Prop Type Default Notes
variant default | destructive | outline | secondary | ghost | link default Chooses the button visual treatment.
size default | sm | lg | icon default Controls height and padding.
loading boolean false Disables interaction and shows the inline spinner.
disabled boolean false Disables the button.
type button | submit | reset button The native button type.
PreviousBubbleNextButtonGroup