Buttons

Clickable elements for actions and navigation, available in multiple styles and colors.

Primary Buttons

    <div class="flex flex-wrap gap-3">
    <pines-button type="Primary" color="Neutral">Neutral</pines-button>
    <pines-button type="Primary" color="Black">Black</pines-button>
    <pines-button type="Primary" color="Blue">Blue</pines-button>
    <pines-button type="Primary" color="Red">Red</pines-button>
    <pines-button type="Primary" color="Green">Green</pines-button>
    <pines-button type="Primary" color="Yellow">Yellow</pines-button>
</div>

Secondary Buttons

    <div class="flex flex-wrap gap-3">
    <pines-button type="Secondary" color="Neutral">Neutral</pines-button>
    <pines-button type="Secondary" color="Black">Black</pines-button>
    <pines-button type="Secondary" color="Blue">Blue</pines-button>
    <pines-button type="Secondary" color="Red">Red</pines-button>
    <pines-button type="Secondary" color="Green">Green</pines-button>
    <pines-button type="Secondary" color="Yellow">Yellow</pines-button>
</div>

Outlined Buttons

    <div class="flex flex-wrap gap-3">
    <pines-button type="Outlined" color="Neutral">Neutral</pines-button>
    <pines-button type="Outlined" color="Black">Black</pines-button>
    <pines-button type="Outlined" color="Blue">Blue</pines-button>
    <pines-button type="Outlined" color="Red">Red</pines-button>
    <pines-button type="Outlined" color="Green">Green</pines-button>
    <pines-button type="Outlined" color="Yellow">Yellow</pines-button>
</div>

Shadow Button

    <pines-shadow-button>Shadow Button</pines-shadow-button>