Button Design System

The unified button component system for the DynaCrete® website. This system provides consistent styling and behavior across all buttons.

Variants

Button variants define the visual style and purpose of buttons throughout the site.

<Button variant="primary">Primary Button</Button>
<Button variant="secondary">Secondary Button</Button>
<Button variant="accent">Accent Button</Button>
<Button variant="outline">Outline Button</Button>
<Button variant="ghost">Ghost Button</Button>

Sizes

Different sizes for different contexts and prominence levels.

<Button variant="primary" size="sm">Small Button</Button>
<Button variant="primary" size="md">Medium Button</Button>
<Button variant="primary" size="lg">Large Button</Button>

Rounded Styles

Choose between default rounded corners or pill-shaped buttons.

<Button variant="primary" rounded="none">Square Button</Button>
<Button variant="primary">Default Rounded</Button>
<Button variant="primary" rounded="full">Pill Button</Button>

Full Width

Buttons that span the full width of their container.

<Button variant="primary" fullWidth>Full Width Button</Button>

Buttons with Icons

Add icons to buttons for additional context or visual appeal.

<Button variant="primary">
  <span class="inline-flex items-center">
    <span set:html={plusIcon} /> <span class="ml-2">Add New</span>
  </span>
</Button>
<Button variant="primary">
  <span class="inline-flex items-center">
    <span class="mr-2">Next Step</span> <span set:html={arrowRightIcon} />
  </span>
</Button>

Link Buttons

Buttons that navigate to other pages or external URLs.

View Products Contact Us 
<Button variant="primary" href="/products">View Products</Button>
<Button variant="outline" href="/contact">
  <span class="inline-flex items-center">
    <span class="mr-2">Contact Us</span> <span set:html={arrowRightIcon} />
  </span>
</Button>

Disabled State

Buttons that cannot be interacted with.

<Button variant="primary" disabled>Disabled Button</Button>
<Button variant="outline" disabled>Disabled Outline</Button>