Buttons – DDI

Ordinary buttons

There are different sizes.

Medium buttons

<div class="flow">
    <button>Primary</button>
    <button disabled>Primary</button>
    <button class="secondary">Secondary</button>
    <button class="secondary" disabled>
        <p>Secondary</p>
    </button>
    <button class="tertiary">Tertiary</button>
    <button class="tertiary" disabled>
        <p>Tertiary</p>
    </button>
</div>

Large buttons

<div class="flow">
    <button class="large">Primary</button>
    <button class="secondary large">Secondary</button>
    <button class="tertiary large">Tertiary</button>
</div>

Small buttons

<div class="flow">
    <button class="small">Primary</button>
    <button class="secondary small">Secondary</button>
    <button class="tertiary small">Tertiary</button>
</div>

You can change the background color.

Custom background

<div class="flow" style="--ddi-c-button-background:rgba(50,150,100,1)">
    <button>Primary</button>
    <button disabled>Primary</button>
    <button class="secondary">Secondary</button>
    <button class="secondary" disabled>
        <p>Secondary</p>
    </button>
    <button class="tertiary">Tertiary</button>
    <button class="tertiary" disabled>
        <p>Tertiary</p>
    </button>
</div>

ToggleButtons

---
import { ToggleButtons } from "@dynamic-type/ddi/server";
---

<ToggleButtons name="color" selectedvalue="green">
    <ToggleButtons.Item value="blue">Blå</ToggleButtons.Item>
    <ToggleButtons.Item value="green">Grön</ToggleButtons.Item>
    <ToggleButtons.Item value="yellow">Gul</ToggleButtons.Item>
    <ToggleButtons.Item value="red">Röd</ToggleButtons.Item>
    <ToggleButtons.Item value="orange">Orange</ToggleButtons.Item>
</ToggleButtons>