tabler/preview/pages/buttons.astro

---
import DefaultLayout from '@shared/layouts/DefaultLayout.astro'
import Icon from '@ui/Icon.astro'
import Button from '@ui/Button.astro'
import ButtonList from '@ui/ButtonList.astro'
import Card from '@ui/Card.astro'
import CardBody from '@ui/CardBody.astro'
import CardTitle from '@ui/CardTitle.astro'
import CardSubtitle from '@ui/CardSubtitle.astro'
import site from '@data/site.json'
import DocsLink from '@ui/DocsLink.astro'

type ColorEntry = [string, { title: string; icon?: string }]

// site.json objects iterated as [key, value] pairs.
// themeColors/colors entries have no icon — Icon renders nothing there.
const themeColors = Object.entries(site.themeColors) as ColorEntry[]
const colors = Object.entries(site.colors) as ColorEntry[]
const socialColors = Object.entries(site.socialColors) as ColorEntry[]

const actions = ['edit', 'copy', 'settings', 'clipboard', 'x']
const sizes = ['sm', 'md', 'lg', 'xl'] as const
---

<DefaultLayout title="Buttons" pageMenu="base.buttons" description="Buttons are used to trigger actions in a user interface.">
  <DocsLink slot="page-header-actions" path="/ui/components/button" />

  <div class="row row-cards mb-5">
    <div class="col-md-6 col-lg-4">
      <Card>
        <CardBody>
          <CardTitle>Basic</CardTitle>
          <CardSubtitle>Add an icon to the left, the right, or drop the label for an icon-only button.</CardSubtitle>
          <ButtonList>
            <Button text="Button" />
            <Button icon="star" text="With icon" />
            <Button iconEnd="star" text="Icon at end" />
            <Button icon="star" iconOnly text="Icon only" />
            <Button text="Disabled" disabled />
          </ButtonList>
        </CardBody>
      </Card>
    </div>
    <div class="col-md-6 col-lg-4">
      <Card>
        <CardBody>
          <CardTitle>Shapes</CardTitle>
          <CardSubtitle>Round the corners with <code>.btn-pill</code>, or square them off with <code>.btn-square</code>.</CardSubtitle>
          <ButtonList>
            <a class="btn">Default</a>
            <a class="btn btn-pill">Pill</a>
            <a class="btn btn-square">Square</a>
            <a class="btn btn-icon">
              <Icon name="star" />
            </a>
            <a class="btn btn-pill btn-icon">
              <Icon name="star" />
            </a>
            <a class="btn btn-square btn-icon">
              <Icon name="star" />
            </a>
          </ButtonList>
        </CardBody>
      </Card>
    </div>
    <div class="col-md-6 col-lg-4">
      <Card>
        <CardBody>
          <CardTitle>Action buttons</CardTitle>
          <CardSubtitle>Compact, icon-only buttons for card headers and toolbars.</CardSubtitle>
          <div class="btn-actions">
            {
              actions.map((action) => (
                <a class="btn btn-action">
                  <Icon name={action} />
                </a>
              ))
            }
          </div>
        </CardBody>
      </Card>
    </div>
    <div class="col-12 col-lg-8">
      <Card>
        <CardBody>
          <CardTitle>Sizes</CardTitle>
          <CardSubtitle>Scale a button from <code>sm</code> to <code>xl</code> without changing its icon layout.</CardSubtitle>
          <div class="space-y">
            {
              sizes.map((size) => (
                <ButtonList>
                  <Button size={size} text="Button" />
                  <Button size={size} icon="star" iconOnly />
                  <Button size={size} icon="star" text="Button" />
                  <Button size={size} iconEnd="star" text="Button" />
                </ButtonList>
              ))
            }
          </div>
        </CardBody>
      </Card>
    </div>
    <div class="col-md-12 col-lg-4">
      <Card>
        <CardBody>
          <CardTitle>Animated icon</CardTitle>
          <CardSubtitle>Small hover animations draw attention to the icon.</CardSubtitle>
          <ButtonList>
            <a class="btn btn-animate-icon">
              Save <Icon name="arrow-right" class="icon-end" />
            </a>
            <a class="btn btn-animate-icon btn-animate-icon-rotate">
              <Icon name="plus" /> Add
            </a>
            <a class="btn btn-animate-icon btn-animate-icon-shake">
              <Icon name="bell" /> Notifications
            </a>
            <a class="btn btn-animate-icon btn-animate-icon-rotate">
              <Icon name="settings" /> Settings
            </a>
            <a class="btn btn-animate-icon btn-animate-icon-pulse">
              <Icon name="heart" /> Love
            </a>
            <a class="btn btn-animate-icon btn-animate-icon-rotate">
              <Icon name="x" /> Close
            </a>
            <a class="btn btn-animate-icon btn-animate-icon-tada">
              <Icon name="check" /> Confirm
            </a>
            <a class="btn btn-animate-icon">
              Next <Icon name="chevron-right" class="icon-end" />
            </a>
            <a class="btn btn-animate-icon btn-animate-icon-move-start">
              <Icon name="chevron-left" /> Previous
            </a>
          </ButtonList>
        </CardBody>
      </Card>
    </div>
    <div class="col-12">
      <Card>
        <CardBody>
          <CardTitle>Standard</CardTitle>
          <CardSubtitle>Fill a button with a theme color to mark its purpose.</CardSubtitle>
          <ButtonList>
            {
              themeColors.map(([name, color]) => (
                <a class={`btn btn-${name}`}>
                  {color.icon && <Icon name={color.icon} />} {color.title}
                </a>
              ))
            }
          </ButtonList>
        </CardBody>
      </Card>
    </div>
    <div class="col-12">
      <Card>
        <CardBody>
          <CardTitle>Outline</CardTitle>
          <CardSubtitle>Keep the border colored and the background transparent for a subtler action.</CardSubtitle>
          <ButtonList>
            {
              themeColors.map(([name, color]) => (
                <a class={`btn btn-outline btn-${name}`}>
                  {color.icon && <Icon name={color.icon} />} {color.title}
                </a>
              ))
            }
          </ButtonList>
        </CardBody>
      </Card>
    </div>
    <div class="col-12">
      <Card>
        <CardBody>
          <CardTitle>Ghost</CardTitle>
          <CardSubtitle>Drop the border too — color appears only on hover.</CardSubtitle>
          <ButtonList>
            {
              themeColors.map(([name, color]) => (
                <a class={`btn btn-ghost btn-${name}`}>
                  {color.icon && <Icon name={color.icon} />} {color.title}
                </a>
              ))
            }
          </ButtonList>
        </CardBody>
      </Card>
    </div>
    <div class="col-12">
      <Card>
        <CardBody>
          <CardTitle>Pill</CardTitle>
          <CardSubtitle>Combine <code>.btn-pill</code> with a theme color.</CardSubtitle>
          <ButtonList>
            {
              themeColors.map(([name, color]) => (
                <a class={`btn btn-pill btn-${name}`}>
                  {color.icon && <Icon name={color.icon} />} {color.title}
                </a>
              ))
            }
          </ButtonList>
        </CardBody>
      </Card>
    </div>
    <div class="col-12">
      <Card>
        <CardBody>
          <CardTitle>Square</CardTitle>
          <CardSubtitle>Combine <code>.btn-square</code> with a theme color.</CardSubtitle>
          <ButtonList>
            {
              themeColors.map(([name, color]) => (
                <a class={`btn btn-square btn-${name}`}>
                  {color.icon && <Icon name={color.icon} />} {color.title}
                </a>
              ))
            }
          </ButtonList>
        </CardBody>
      </Card>
    </div>
    <div class="col-12">
      <Card>
        <CardBody>
          <CardTitle>Extra colors</CardTitle>
          <CardSubtitle>The full Tabler palette, beyond the eight theme colors.</CardSubtitle>
          <ButtonList>
            {
              colors.map(([name, color]) => (
                <a class={`btn btn-${name}`}>
                  {color.icon && <Icon name={color.icon} />} {color.title}
                </a>
              ))
            }
          </ButtonList>
        </CardBody>
      </Card>
    </div>
    <div class="col-12">
      <Card>
        <CardBody>
          <CardTitle>Social colors</CardTitle>
          <CardSubtitle>Brand colors for linking out to social networks.</CardSubtitle>
          <ButtonList>
            {
              socialColors.map(([name, app]) => (
                <a class={`btn btn-${name}`}>
                  {app.icon && <Icon name={app.icon} />} {app.title}
                </a>
              ))
            }
          </ButtonList>
        </CardBody>
      </Card>
    </div>
    <div class="col-12">
      <Card>
        <CardBody>
          <CardTitle>Icon buttons</CardTitle>
          <CardSubtitle>Social brand colors without a label, for compact toolbars.</CardSubtitle>
          <ButtonList>{socialColors.map(([name, app]) => <a class={`btn btn-icon btn-${name}`}>{app.icon && <Icon name={app.icon} />}</a>)}</ButtonList>
        </CardBody>
      </Card>
    </div>
  </div>
</DefaultLayout>