Button

Get started with the basics of using the theme.

experimental

---
import Button from '@/components/Button.astro';
---

<Button>Button</Button>

Variants

Rocketship components come with different variants. You can customize the components by changing the variant.

variant	description	example	code
solid	Solid Button	Button	<Button variant="solid">Button</Button>
outline	Outline Button	Button	<Button variant="outline">Button</Button>
soft	Soft Button	Button	<Button variant="soft">Button</Button>
ghost	Ghost Button	Button	<Button variant="ghost">Button</Button>
surface	Surface Button	Button	<Button variant="surface">Button</Button>

Sizes

Rocketship components now use a numeric scale for sizes, corresponding to specific text styles. You can customize the components by changing the size.

size	description	example	code
1	Tiny Button	Button	<Button size="1">Button</Button>
3	Small Button	Button	<Button size="3">Button</Button>
5	Medium Button	Button	<Button size="5">Button</Button>

Note: Sizes 2, 4, 6, and 8 are also available for more fine-grained control.

Radius

Rocketship components come with different radius options. You can customize the components by changing the radius.

radius	description	example	code
sm	Small Radius	Button	<Button radius="sm">Button</Button>
md	Medium Radius	Button	<Button radius="md">Button</Button>
lg	Large Radius	Button	<Button radius="lg">Button</Button>
full	Full Radius	Button	<Button radius="full">Button</Button>

Colors

Rocketship components come with different colors based on the Radix color system. You can customize the components by changing the color.

color	description	example	code
indigo	indigo Color	Button	<Button color="indigo">Button</Button>
blue	Blue Color	Button	<Button color="blue">Button</Button>
cyan	Cyan Color	Button	<Button color="cyan">Button</Button>
teal	Teal Color	Button	<Button color="teal">Button</Button>
green	Green	Button	<Button color="green">Button</Button>
red	red	Button	<Button color="red">Button</Button>
tomato	tomato	Button	<Button color="tomato">Button</Button>
orange	Orange Color	Button	<Button color="orange">Button</Button>
purple	Purple Color	Button	<Button color="purple">Button</Button>
pink	Pink Color	Button	<Button color="pink">Button</Button>
gray	Neutral Color	Button	<Button color="gray">Button</Button>

Combining Properties

You can combine different properties to create custom buttons:

<Button size="5" color="accent" variant="outline" radius="full">
  Custom Button
</Button>

This will create a medium-sized, accent-colored outline button with fully rounded corners.

Custom Button