Button Component

Figma

The glu-button component is a highly customizable button element that supports various appearances, sizes, and types. It functions either as a standard button or as a link when an href is provided.

Basic Usage

Example 1: Simple Button

Use the button as a clickable element.

HTML

Result

Loading...

Live Editor

<glu-button>Click Me</glu-button>

React

Result

Loading...

Live Editor

<GluButton>Click Me</GluButton>

Vue

<glu-button>Click Me</glu-button>

<script setup>
import { GluButton } from '@gelato-ui/vue';
</script>

Angular

<glu-button>Click Me</glu-button>

import { Component } from '@angular/core';
import { GluButton } from '@gelato-ui/angular';

@Component({
  standalone: true,
  imports: [GluButton],
  template: `<glu-button>Click Me</glu-button>`
})
export class MyComponent {}

---

Button as a Link

When an href is provided, the component renders as an anchor tag.

HTML

Result

Loading...

Live Editor

<glu-button href="https://example.com" target="_blank" rel="noopener noreferrer">
  Visit Example
</glu-button>

React

Result

Loading...

Live Editor

<GluButton href="https://example.com" target="_blank" rel="noopener noreferrer">
  Visit Example
</GluButton>

Vue

<glu-button href="https://example.com" target="_blank" rel="noopener noreferrer">
  Visit Example
</glu-button>

<script setup>
import { GluButton } from '@gelato-ui/vue';
</script>

Angular

<glu-button href="https://example.com" target="_blank" rel="noopener noreferrer">
  Visit Example
</glu-button>

import { Component } from '@angular/core';
import { GluButton } from '@gelato-ui/angular';

@Component({
  standalone: true,
  imports: [GluButton],
  template: `<glu-button href="https://example.com" target="_blank" rel="noopener noreferrer">
               Visit Example
             </glu-button>`
})
export class MyComponent {}

---

Different Appearances

Customize the visual style using the appearance property.

HTML

Result

Loading...

Live Editor

<div style={{ display: 'flex', gap: '1rem' }}>
  <glu-button>Filled</glu-button>
  <glu-button appearance="outline">Outline</glu-button>
  <glu-button appearance="ghost">Ghost</glu-button>
</div>

React

Result

Loading...

Live Editor

<div style={{ display: 'flex', gap: '1rem' }}>
  <GluButton>Filled</GluButton>
  <GluButton appearance="outline">Outline</GluButton>
  <GluButton appearance="ghost">Ghost</GluButton>
</div>

Vue

<div style="display: flex; gap: 1rem;">
  <glu-button>Filled</glu-button>
  <glu-button appearance="outline">Outline</glu-button>
  <glu-button appearance="ghost">Ghost</glu-button>
</div>

<script setup>
import { GluButton } from '@gelato-ui/vue';
</script>

Angular

<div style="display: flex; gap: 1rem;">
  <glu-button>Filled</glu-button>
  <glu-button appearance="outline">Outline</glu-button>
  <glu-button appearance="ghost">Ghost</glu-button>
</div>

import { Component } from '@angular/core';
import { GluButton } from '@gelato-ui/angular';

@Component({
  standalone: true,
  imports: [GluButton],
  template: `<div style="display: flex; gap: 1rem;">
               <glu-button>Filled</glu-button>
               <glu-button appearance="outline">Outline</glu-button>
               <glu-button appearance="ghost">Ghost</glu-button>
             </div>`
})
export class MyComponent {}

---

Button Sizes

Showcase the component in different sizes.

HTML

Result

Loading...

Live Editor

<div style={{ display: 'flex', gap: '1rem', alignItems: 'center' }}>
  <glu-button size="small">Small</glu-button>
  <glu-button size="medium">Medium</glu-button>
  <glu-button size="large">Large</glu-button>
</div>

React

Result

Loading...

Live Editor

<div style={{ display: 'flex', gap: '1rem', alignItems: 'center' }}>
  <GluButton size="small">Small</GluButton>
  <GluButton size="medium">Medium</GluButton>
  <GluButton size="large">Large</GluButton>
</div>

Vue

<div style="display: flex; gap: 1rem; align-items: center;">
  <glu-button size="small">Small</glu-button>
  <glu-button size="medium">Medium</glu-button>
  <glu-button size="large">Large</glu-button>
</div>

<script setup>
import { GluButton } from '@gelato-ui/vue';
</script>

Angular

<div style="display: flex; gap: 1rem; align-items: center;">
  <glu-button size="small">Small</glu-button>
  <glu-button size="medium">Medium</glu-button>
  <glu-button size="large">Large</glu-button>
</div>

import { Component } from '@angular/core';
import { GluButton } from '@gelato-ui/angular';

@Component({
  standalone: true,
  imports: [GluButton],
  template: `<div style="display: flex; gap: 1rem; align-items: center;">
               <glu-button size="small">Small</glu-button>
               <glu-button size="medium">Medium</glu-button>
               <glu-button size="large">Large</glu-button>
             </div>`
})
export class MyComponent {}

---

Advanced Slot Usage

Customize the button content using slots for icons or additional text.

HTML

Result

Loading...

Live Editor

<div style={{ display: 'flex', gap: '1rem', alignItems: 'center' }}>
  <glu-button>
    <span slot="start">🔥</span>
    Submit
    <span slot="end">🚀</span>
  </glu-button>
</div>

React

Result

Loading...

Live Editor

<div style={{ display: 'flex', gap: '1rem', alignItems: 'center' }}>
  <GluButton>
    <span slot="start">🔥</span>
    Submit
    <span slot="end">🚀</span>
  </GluButton>
</div>

Vue

<div style="display: flex; gap: 1rem; align-items: center;">
  <glu-button>
    <template #start>🔥</template>
    Submit
    <template #end>🚀</template>
  </glu-button>
</div>

<script setup>
import { GluButton } from '@gelato-ui/vue';
</script>

Angular

<div style="display: flex; gap: 1rem; align-items: center;">
  <glu-button>
    <span slot="start">🔥</span>
    Submit
    <span slot="end">🚀</span>
  </glu-button>
</div>

import { Component } from '@angular/core';
import { GluButton } from '@gelato-ui/angular';

@Component({
  standalone: true,
  imports: [GluButton],
  template: `<div style="display: flex; gap: 1rem; align-items: center;">
               <glu-button>
                 <span slot="start">🔥</span>
                 Submit
                 <span slot="end">🚀</span>
               </glu-button>
             </div>`
})
export class MyComponent {}

---

Button in a Form

Use the button as a submission control within a form.

HTML

Result

Loading...

Live Editor

<form onsubmit="alert('Form submitted'); return false;">
  <glu-button type="submit">Submit Form</glu-button>
</form>

React

Result

Loading...

Live Editor

function FormExample() {
  const handleSubmit = (e) => {
    e.preventDefault();
    alert('Form submitted');
  }

  return (
    <form onSubmit={handleSubmit}>
      <GluButton type="submit">Submit Form</GluButton>
    </form>
  );
}

Vue

<form @submit.prevent="() => alert('Form submitted')">
  <glu-button type="submit">Submit Form</glu-button>
</form>

<script setup>
import { GluButton } from '@gelato-ui/vue';
</script>

Angular

<form (ngSubmit)="onSubmit()">
  <glu-button type="submit">Submit Form</glu-button>
</form>

import { Component } from '@angular/core';
import { GluButton } from '@gelato-ui/angular';

@Component({
  standalone: true,
  imports: [GluButton],
  template: `
    <form (ngSubmit)="onSubmit()">
      <glu-button type="submit">Submit Form</glu-button>
    </form>
  `
})
export class MyComponent {
  onSubmit() {
    alert('Form submitted');
  }
}

---

Properties

Property	Attribute	Description	Type	Default
appearance	appearance	Determines the visual style of the button	"filled" | "ghost" | "outline"	'filled'
buttonType	button-type	Specifies the type of button.	"destructive" | "primary" | "secondary"	'primary'
disabled	disabled	If true, the user cannot interact with the button.	any	undefined
href	href	Contains a URL or a URL fragment that the hyperlink points to. If set, an anchor tag will be rendered.	string	undefined
size	size	Defines the size of the button.	"large" | "medium" | "small"	'medium'

Slots

Slot	Description
	Default content placed between the start and end slots.
"end"	Content placed at the end of the button, after the default slot.
"icon-only"	Content placed in the center of the button, typically used for icons.
"start"	Content placed at the beginning of the button, before the default slot.

Dependencies

Used by

• glu-dropdown

Graph

---

Built with StencilJS