---
type: doc
title: Button
description: Native Liquid button with readable CSS and shared data-slot parts.
---

> Native Liquid and CSS. Install from `https://ui.full.dev/r/liquid/{name}.json`; see [layout setup](/liquid/docs/installation.md). No Tailwind or consuming build.

```liquid title="liquid/examples/button.liquid"
<div style='display:flex;flex-wrap:wrap;align-items:center;gap:12px'>
  {% render 'ui-button', label: 'Button' %}
  {% render 'ui-button', label: 'Outline', variant: 'outline' %}
  {% render 'ui-button', label: 'Secondary', variant: 'secondary' %}
  {% render 'ui-button', label: 'Ghost', variant: 'ghost' %}
  {% render 'ui-button', label: 'Destructive', variant: 'destructive' %}
  {% render 'ui-button', label: 'View collection', href: routes.all_products_collection_url, variant: 'link' %}
</div>
```

## Installation

```bash
npx shadcn@latest add https://ui.full.dev/r/liquid/button.json
```

Follow the [one-time layout setup](/liquid/docs/installation/). A full `components` install already includes this item.

## Usage

After this install, render these once in the layout head before theme overrides and other modules. The full `ui` hook already includes them. The command also installs the parts used in this example.

```liquid
{% render 'ui-init' %}
{% render 'ui-button' %}
```

The preview and its Usage tab render the same native Liquid source. Use `data-slot` for parts, `data-variant` for variants and `data-size` for sizes. Keep your store's labels, translations and Shopify data in your theme.

## Parts

`button`.

[Component source](https://github.com/fulldotdev/ui/tree/main/liquid/components/button.liquid) · [Theming](/liquid/docs/theming/)

## Variants

`destructive`, `ghost`, `link`, `media`, `media-secondary`, `outline`, `secondary`, `{{ variant | default: `.

## Sizes

`icon-lg`, `icon-sm`, `icon-xs`, `lg`, `sm`, `xs`, `{{ size | default: `.

## Install what this page shows

```bash
npx shadcn@latest add https://ui.full.dev/r/liquid/button.json
```