Tulip Logo IconTulip
Components

Button

Displays a button or a component that looks like a button.

Usage

import { Button } from "@tulip-systems/core/components";
<Button variant="outline">Button</Button>

Examples

Size

Use the size prop to change the size of the button.

Default

Outline

Secondary

Ghost

Destructive

Icon

With Icon

Remember to add the data-icon="inline-start" or data-icon="inline-end" attribute to the icon for the correct spacing.

Rounded

Use the rounded-full class to make the button rounded.

Spinner

Render a Spinner component inside the button to show a loading state. Remember to add the data-icon="inline-start" or data-icon="inline-end" attribute to the spinner for the correct spacing.

You can use the asChild prop on <Button /> to make another component look like a button.

On this page