Button - JS + CSS
Button
Struktur HTML
Section titled “Struktur HTML”
<button class="ina-button ina-button--primary ina-button--md">Button</button>
Contoh Penggunaan
Section titled “Contoh Penggunaan”Contoh 1
Section titled “Contoh 1”<div class="p-5 flex flex-col gap-4">
<div class="flex items-center gap-3 flex-wrap">
<button class="ina-button ina-button--primary ina-button--md">Primary</button>
<button class="ina-button ina-button--secondary ina-button--md">Secondary</button>
<button class="ina-button ina-button--tertiary ina-button--md">Tertiary</button>
<button class="ina-button ina-button--link ina-button--md">Link</button>
</div>
<div class="flex items-center gap-3 flex-wrap">
<button class="ina-button ina-button--primary ina-button--sm">Small</button>
<button class="ina-button ina-button--primary ina-button--md">Medium</button>
<button class="ina-button ina-button--primary ina-button--lg">Large</button>
<button class="ina-button ina-button--primary ina-button--xl">Extra Large</button>
<button class="ina-button ina-button--primary ina-button--2xl">2X Large</button>
</div>
</div>Contoh 2
Section titled “Contoh 2”<div class="p-5 flex flex-col gap-4">
<div class="flex items-center gap-3 flex-wrap">
<button class="ina-button ina-button--primary ina-button--md">
<span class="ina-button__prefix-icon">
<svg
width="16"
height="16"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"></path>
<polyline
points="7 10 12 15 17 10"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"></polyline>
<line
x1="12"
y1="15"
x2="12"
y2="3"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"></line>
</svg>
</span>
Download
</button>
<button class="ina-button ina-button--secondary ina-button--md">
Continue
<span class="ina-button__suffix-icon">
<svg
width="16"
height="16"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<line
x1="5"
y1="12"
x2="19"
y2="12"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"></line>
<polyline
points="12 5 19 12 12 19"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"></polyline>
</svg>
</span>
</button>
<button class="ina-button ina-button--primary ina-button--md">
<span class="ina-button__prefix-icon">
<svg
width="16"
height="16"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<polyline
points="20 6 9 17 4 12"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"></polyline>
</svg>
</span>
Submit
<span class="ina-button__suffix-icon">
<svg
width="16"
height="16"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<line
x1="5"
y1="12"
x2="19"
y2="12"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"></line>
<polyline
points="12 5 19 12 12 19"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"></polyline>
</svg>
</span>
</button>
</div>
<div class="flex items-center gap-3 flex-wrap">
<button class="ina-button ina-button--primary ina-button--md" disabled>Disabled</button>
<button class="ina-button ina-button--secondary ina-button--md" disabled>Disabled</button>
</div>
</div>