Documents

Home

---

Styles

Button Form Grid Label Table Text Typography

---

Components

Box Breadcrumb Dropdown Menu Message Modal Pagination Sidebar

<button class="button">Basic<button>
<button class="primary button">Primary<button>
<button class="secondary button">Secondary<button>
<a class="negative button">Negative<a>
<input type="submit" class="positive button" value="Positive">

<a class="flat button">Basic<a>
<input type="submit" class="primary flat button" value="Primary">
<button class="secondary flat button">Secondary<button>
<button class="negative flat button">Negative<button>
<button class="positive flat button">Positive<button>

<a class="lined button">Basic<a>
<input type="submit" class="primary lined button" value="Primary">
<button class="secondary lined button">Secondary<button>
<button class="negative lined button">Negative<button>
<button class="positive lined button">Positive<button>

<a class="flat lined button"><a>
<input type="submit" class="primary flat lined button" value="Primary">
<button class="secondary flat lined button"><button>
<button class="negative flat lined button"><button>
<button class="positive flat lined button"><button>

<div class="container">
  <button class="grouped button">Basic<button>
  <button class="grouped button">Basic<button>
</div>

<div class="container">
  <button class="grouped flat button">Basic<button>
  <button class="grouped flat primary button">Primary<button>
  <button class="grouped flat secondary button">Secondary<button>
  <button class="grouped flat negative button">Negative<button>
  <button class="grouped flat positive button">Positive<button>
</div>

<div class="container">
  <button class="grouped flat lined button">Basic<button>
  <button class="grouped primary flat lined button">Primary<button>
  <button class="grouped secondary flat lined button">Secondary<button>
  <button class="grouped negative flat lined button">Negative<button>
  <button class="grouped positive flat lined button">Positive<button>
</div>

<button class="disabled button"><button>
<button class="primary disabled button"><button>
<button class="secondary disabled button"><button>
<button class="negative disabled button"><button>
<button class="positive disabled button"><button>

<button class="disabled lined button"><button>
<button class="primary disabled lined button"><button>
<button class="secondary disabled lined button"><button>
<button class="negative disabled lined button"><button>
<button class="positive disabled lined button"><button>

<button class="disabled flat button"><button>
<button class="primary disabled flat button"><button>
<button class="secondary disabled flat button"><button>
<button class="negative disabled flat button"><button>
<button class="positive disabled flat button"><button>

<button class="disabled flat lined button"><button>
<button class="primary disabled flat lined button"><button>
<button class="secondary disabled flat lined button"><button>
<button class="negative disabled flat lined button"><button>
<button class="positive disabled flat lined button"><button>

<div class="container">
  <button class="disabled grouped button">Basic<button>
  <button class="disabled grouped primary button">Primary<button>
  <button class="disabled grouped secondary button">Secondary<button>
  <button class="disabled grouped negative button">Negative<button>
  <button class="disabled grouped positive button">Positive<button>
</div>

<div class="container">
  <button class="disabled grouped flat button">Basic<button>
  <button class="disabled grouped primary flat button">Primary<button>
  <button class="disabled grouped secondary flat button">Secondary<button>
  <button class="disabled grouped negative flat button">Negative<button>
  <button class="disabled grouped positive flat button">Positive<button>
</div>

<div class="container">
  <button class="disabled grouped flat lined button">Basic<button>
  <button class="disabled grouped primary flat lined button">Primary<button>
  <button class="disabled grouped secondary flat lined button">Secondary<button>
  <button class="disabled grouped negative flat lined button">Negative<button>
  <button class="disabled grouped positive flat lined button">Positive<button>
</div>