Button

A button component with support for different colors, sizes and states out of the box. You can also customize it to your needs!

Usage

Preview
Code

1
---
2
import { Button } from 'studiocms:ui/components';
3
---
4

5
<Button color='primary'>
6
  Button
7
</Button>

Disabled

You can disable the button component via the disabled attribute:

Preview
Code

1
---
2
import { Button } from 'studiocms:ui/components';
3
---
4

5
<Button color='primary' disabled>
6
  Button
7
</Button>

Sizes

The button component supports three different sizes out of the box:

Preview
Code

1
---
2
import { Button } from 'studiocms:ui/components';
3
---
4

5
<Button color='primary' size='sm'>
6
  Button (sm)
7
</Button>
8
<Button color='primary'>
9
  Button (default)
10
</Button>
11
<Button color='primary' size='lg'>
12
  Button (lg)
13
</Button>

Colors

There is five default colorways that can be used right away:

Default
Primary
Success
Warning
Danger
Info
Monochrome

Preview
Code

1
---
2
import { Button } from 'studiocms:ui/components';
3
---
4

5
<Button color='default'>
6
  Default
7
</Button>
8
<Button color='primary'>
9
  Primary
10
</Button>
11
<Button color='success'>
12
  Success
13
</Button>
14
<Button color='warning'>
15
  Warning
16
</Button>
17
<Button color='danger'>
18
  Danger
19
</Button>
20
<Button color='info'>
21
  Info
22
</Button>
23
<Button color='mono'>
24
  Monochrome
25
</Button>

Variants

In addition to colors, the button component can be displayed in three different variants:

Preview
Code

1
---
2
import { Button } from 'studiocms:ui/components';
3
---
4

5
<Button color='primary'>
6
  Default
7
</Button>
8
<Button color='primary' variant="outlined">
9
  Outlined
10
</Button>
11
<Button color='primary' variant="flat">
12
  Flat
13
</Button>

Polymorphic (rendered as anchor tag)

Thanks to Astro’s Polymorphic type, you can change the button’s parent component into whatever HTML tag you need it to be! Here’s an example where the button is an <a> tag instead of a <button>:

Preview
Code

studiocms.dev

1
---
2
import { Button } from 'studiocms:ui/components';
3
---
4

5
<Button color='primary' target="_blank" as='a' href="https://studiocms.dev">
6
  studiocms.dev
7
</Button>

Custom Styles

As mentioned earlier, you can apply your custom styles to the button component! Here’s a gradient button to show you how it’s done:

1
---
2
import { Button } from 'studiocms:ui/components';
3
---
4

5
<Button style="background-image: linear-gradient(to top right, #a07cee, #4ff8d2); color: black; font-weight: 600;">
6
  Custom Button
7
</Button>

1
---
2
import { Button } from 'studiocms:ui/components';
3
---
4

5
<Button class="custom-btn">
6
  Custom Button
7
</Button>
8
<style>
9
  .custom-btn {
10
    background-image: linear-gradient(to top right, #a07cee, #4ff8d2) !important;
11
    color: black !important;
12
    font-weight: 600 !important;
13
  }
14
</style>