Buttons within the system have a standard size and a compact size to match the text inputs. Primary buttons have a solid affordance fill, and secondary buttons use a 1pt outline of the affordance color. Tertiary buttons have no affordance container.

To add an icon, use the .ray-button__icon class on an element, usually an svg. Buttons should always be on the right side of the text. For accessibility, it is recommended to add a <title> element to your svg.

iconsPrimary button

<button class="ray-button ray-button--primary">
  Click Me
</button>
<button class="ray-button ray-button--primary" disabled>Click Me</button>
<button class="ray-button ray-button--primary">
  Click Me
  <svg
    class="ray-button__icon"
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 25 25"
  >
    <g>
      <path
        d="M12.5,6C5.5964,6,0,12.6211,0,13.5S5.5964,21,12.5,21,25,14.4375,25,13.5,19.4036,6,12.5,6Zm0,11A3.5,3.5,0,1,1,16,13.5,3.5,3.5,0,0,1,12.5,17Z"
      />
    </g>
  </svg>
</button>
<button class="ray-button ray-button--primary" disabled>
  Click Me
  <svg
    class="ray-button__icon"
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 25 25"
  >
    <g>
      <path
        d="M12.5,6C5.5964,6,0,12.6211,0,13.5S5.5964,21,12.5,21,25,14.4375,25,13.5,19.4036,6,12.5,6Zm0,11A3.5,3.5,0,1,1,16,13.5,3.5,3.5,0,0,1,12.5,17Z"
      />
    </g>
  </svg>
</button>

iconsPrimary button dark

<button class="ray-button ray-button--primary ray-button--dark">
  Click Me
</button>
<button class="ray-button ray-button--primary ray-button--dark" disabled>
  Click Me
</button>
<button class="ray-button ray-button--primary ray-button--dark">
  Click Me
  <svg
    class="ray-button__icon"
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 25 25"
  >
    <g>
      <path
        d="M12.5,6C5.5964,6,0,12.6211,0,13.5S5.5964,21,12.5,21,25,14.4375,25,13.5,19.4036,6,12.5,6Zm0,11A3.5,3.5,0,1,1,16,13.5,3.5,3.5,0,0,1,12.5,17Z"
      />
    </g>
  </svg>
</button>
<button class="ray-button ray-button--primary ray-button--dark" disabled>
  Click Me
  <svg
    class="ray-button__icon"
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 25 25"
  >
    <g>
      <path
        d="M12.5,6C5.5964,6,0,12.6211,0,13.5S5.5964,21,12.5,21,25,14.4375,25,13.5,19.4036,6,12.5,6Zm0,11A3.5,3.5,0,1,1,16,13.5,3.5,3.5,0,0,1,12.5,17Z"
      />
    </g>
  </svg>
</button>

iconsPrimary button (RTL)

<div dir="rtl">
  <button class="ray-button ray-button--primary">
    לחץ עלי
  </button>
  <button class="ray-button ray-button--primary" disabled>לחץ עלי</button>
  <button class="ray-button ray-button--primary">
    לחץ עלי
    <svg
      class="ray-button__icon"
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 25 25"
    >
      <g>
        <path
          d="M12.5,6C5.5964,6,0,12.6211,0,13.5S5.5964,21,12.5,21,25,14.4375,25,13.5,19.4036,6,12.5,6Zm0,11A3.5,3.5,0,1,1,16,13.5,3.5,3.5,0,0,1,12.5,17Z"
        />
      </g>
    </svg>
  </button>
  <button class="ray-button ray-button--primary" disabled>
    לחץ עלי
    <svg
      class="ray-button__icon"
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 25 25"
    >
      <g>
        <path
          d="M12.5,6C5.5964,6,0,12.6211,0,13.5S5.5964,21,12.5,21,25,14.4375,25,13.5,19.4036,6,12.5,6Zm0,11A3.5,3.5,0,1,1,16,13.5,3.5,3.5,0,0,1,12.5,17Z"
        />
      </g>
    </svg>
  </button>
</div>

iconsSecondary button

<button class="ray-button ray-button--secondary">Click Me</button>
<button class="ray-button ray-button--secondary" disabled>Click Me</button>
<button class="ray-button ray-button--secondary">
  Click Me
  <svg
    class="ray-button__icon"
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 25 25"
  >
    <g>
      <path
        d="M12.5,6C5.5964,6,0,12.6211,0,13.5S5.5964,21,12.5,21,25,14.4375,25,13.5,19.4036,6,12.5,6Zm0,11A3.5,3.5,0,1,1,16,13.5,3.5,3.5,0,0,1,12.5,17Z"
      />
    </g>
  </svg>
</button>
<button class="ray-button ray-button--secondary" disabled>
  Click Me
  <svg
    class="ray-button__icon"
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 25 25"
  >
    <g>
      <path
        d="M12.5,6C5.5964,6,0,12.6211,0,13.5S5.5964,21,12.5,21,25,14.4375,25,13.5,19.4036,6,12.5,6Zm0,11A3.5,3.5,0,1,1,16,13.5,3.5,3.5,0,0,1,12.5,17Z"
      />
    </g>
  </svg>
</button>

iconsSecondary button dark

<button class="ray-button ray-button--secondary ray-button--dark">
  Click Me
</button>
<button class="ray-button ray-button--secondary ray-button--dark" disabled>
  Click Me
</button>
<button class="ray-button ray-button--secondary ray-button--dark">
  Click Me
  <svg
    class="ray-button__icon"
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 25 25"
  >
    <g>
      <path
        d="M12.5,6C5.5964,6,0,12.6211,0,13.5S5.5964,21,12.5,21,25,14.4375,25,13.5,19.4036,6,12.5,6Zm0,11A3.5,3.5,0,1,1,16,13.5,3.5,3.5,0,0,1,12.5,17Z"
      />
    </g>
  </svg>
</button>
<button class="ray-button ray-button--secondary ray-button--dark" disabled>
  Click Me
  <svg
    class="ray-button__icon"
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 25 25"
  >
    <g>
      <path
        d="M12.5,6C5.5964,6,0,12.6211,0,13.5S5.5964,21,12.5,21,25,14.4375,25,13.5,19.4036,6,12.5,6Zm0,11A3.5,3.5,0,1,1,16,13.5,3.5,3.5,0,0,1,12.5,17Z"
      />
    </g>
  </svg>
</button>

iconsSecondary button (RTL)

<div dir="rtl">
  <button class="ray-button ray-button--secondary">לחץ עלי</button>
  <button class="ray-button ray-button--secondary" disabled>לחץ עלי</button>
  <button class="ray-button ray-button--secondary">
    לחץ עלי
    <svg
      class="ray-button__icon"
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 25 25"
    >
      <g>
        <path
          d="M12.5,6C5.5964,6,0,12.6211,0,13.5S5.5964,21,12.5,21,25,14.4375,25,13.5,19.4036,6,12.5,6Zm0,11A3.5,3.5,0,1,1,16,13.5,3.5,3.5,0,0,1,12.5,17Z"
        />
      </g>
    </svg>
  </button>
  <button class="ray-button ray-button--secondary" disabled>
    לחץ עלי
    <svg
      class="ray-button__icon"
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 25 25"
    >
      <g>
        <path
          d="M12.5,6C5.5964,6,0,12.6211,0,13.5S5.5964,21,12.5,21,25,14.4375,25,13.5,19.4036,6,12.5,6Zm0,11A3.5,3.5,0,1,1,16,13.5,3.5,3.5,0,0,1,12.5,17Z"
        />
      </g>
    </svg>
  </button>
</div>

iconsTertiary button

<button class="ray-button ray-button--tertiary">Click Me</button>
<button class="ray-button ray-button--tertiary" disabled>Click Me</button>
<button class="ray-button ray-button--tertiary">
  Click Me
  <svg
    class="ray-button__icon"
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 25 25"
  >
    <g>
      <path
        d="M12.5,6C5.5964,6,0,12.6211,0,13.5S5.5964,21,12.5,21,25,14.4375,25,13.5,19.4036,6,12.5,6Zm0,11A3.5,3.5,0,1,1,16,13.5,3.5,3.5,0,0,1,12.5,17Z"
      />
    </g>
  </svg>
</button>

<button class="ray-button ray-button--tertiary" disabled>
  Click Me
  <svg
    class="ray-button__icon"
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 25 25"
  >
    <g>
      <path
        d="M12.5,6C5.5964,6,0,12.6211,0,13.5S5.5964,21,12.5,21,25,14.4375,25,13.5,19.4036,6,12.5,6Zm0,11A3.5,3.5,0,1,1,16,13.5,3.5,3.5,0,0,1,12.5,17Z"
      />
    </g>
  </svg>
</button>

iconsTertiary button dark

<button class="ray-button ray-button--tertiary ray-button--dark">
  Click Me
</button>
<button class="ray-button ray-button--tertiary ray-button--dark" disabled>
  Click Me
</button>
<button class="ray-button ray-button--tertiary ray-button--dark">
  Click Me
  <svg
    class="ray-button__icon"
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 25 25"
  >
    <g>
      <path
        d="M12.5,6C5.5964,6,0,12.6211,0,13.5S5.5964,21,12.5,21,25,14.4375,25,13.5,19.4036,6,12.5,6Zm0,11A3.5,3.5,0,1,1,16,13.5,3.5,3.5,0,0,1,12.5,17Z"
      />
    </g>
  </svg>
</button>

<button class="ray-button ray-button--tertiary ray-button--dark" disabled>
  Click Me
  <svg
    class="ray-button__icon"
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 25 25"
  >
    <g>
      <path
        d="M12.5,6C5.5964,6,0,12.6211,0,13.5S5.5964,21,12.5,21,25,14.4375,25,13.5,19.4036,6,12.5,6Zm0,11A3.5,3.5,0,1,1,16,13.5,3.5,3.5,0,0,1,12.5,17Z"
      />
    </g>
  </svg>
</button>

iconsTertiary button (RTL)

<div dir="rtl">
  <button class="ray-button ray-button--tertiary">לחץ עלי</button>
  <button class="ray-button ray-button--tertiary" disabled>לחץ עלי</button>
  <button class="ray-button ray-button--tertiary">
    לחץ עלי
    <svg
      class="ray-button__icon"
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 25 25"
    >
      <g>
        <path
          d="M12.5,6C5.5964,6,0,12.6211,0,13.5S5.5964,21,12.5,21,25,14.4375,25,13.5,19.4036,6,12.5,6Zm0,11A3.5,3.5,0,1,1,16,13.5,3.5,3.5,0,0,1,12.5,17Z"
        />
      </g>
    </svg>
  </button>

  <button class="ray-button ray-button--tertiary" disabled>
    לחץ עלי
    <svg
      class="ray-button__icon"
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 25 25"
    >
      <g>
        <path
          d="M12.5,6C5.5964,6,0,12.6211,0,13.5S5.5964,21,12.5,21,25,14.4375,25,13.5,19.4036,6,12.5,6Zm0,11A3.5,3.5,0,1,1,16,13.5,3.5,3.5,0,0,1,12.5,17Z"
        />
      </g>
    </svg>
  </button>
</div>

iconsCompact button

<button class="ray-button ray-button--primary ray-button--compact">
  Click Me
</button>
<button class="ray-button ray-button--primary ray-button--compact" disabled>
  Click Me
</button>
<button class="ray-button ray-button--primary ray-button--compact">
  Click Me
  <svg
    class="ray-button__icon"
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 25 25"
  >
    <g>
      <path
        d="M12.5,6C5.5964,6,0,12.6211,0,13.5S5.5964,21,12.5,21,25,14.4375,25,13.5,19.4036,6,12.5,6Zm0,11A3.5,3.5,0,1,1,16,13.5,3.5,3.5,0,0,1,12.5,17Z"
      />
    </g>
  </svg>
</button>
<button class="ray-button ray-button--secondary ray-button--compact">
  Click Me
</button>
<button class="ray-button ray-button--secondary ray-button--compact" disabled>
  Click Me
</button>

<button class="ray-button ray-button--secondary ray-button--compact" disabled>
  Click Me
  <svg
    class="ray-button__icon"
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 25 25"
  >
    <g>
      <path
        d="M12.5,6C5.5964,6,0,12.6211,0,13.5S5.5964,21,12.5,21,25,14.4375,25,13.5,19.4036,6,12.5,6Zm0,11A3.5,3.5,0,1,1,16,13.5,3.5,3.5,0,0,1,12.5,17Z"
      />
    </g>
  </svg>
</button>

iconsCompact button (RTL)

<div dir="rtl">
  <button class="ray-button ray-button--primary ray-button--compact">
    לחץ עלי
  </button>
  <button class="ray-button ray-button--primary ray-button--compact" disabled>
    לחץ עלי
  </button>
  <button class="ray-button ray-button--primary ray-button--compact">
    לחץ עלי
    <svg
      class="ray-button__icon"
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 25 25"
    >
      <g>
        <path
          d="M12.5,6C5.5964,6,0,12.6211,0,13.5S5.5964,21,12.5,21,25,14.4375,25,13.5,19.4036,6,12.5,6Zm0,11A3.5,3.5,0,1,1,16,13.5,3.5,3.5,0,0,1,12.5,17Z"
        />
      </g>
    </svg>
  </button>
  <button class="ray-button ray-button--secondary ray-button--compact">
    לחץ עלי
  </button>
  <button class="ray-button ray-button--secondary ray-button--compact" disabled>
    לחץ עלי
  </button>

  <button class="ray-button ray-button--secondary ray-button--compact" disabled>
    לחץ עלי
    <svg
      class="ray-button__icon"
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 25 25"
    >
      <g>
        <path
          d="M12.5,6C5.5964,6,0,12.6211,0,13.5S5.5964,21,12.5,21,25,14.4375,25,13.5,19.4036,6,12.5,6Zm0,11A3.5,3.5,0,1,1,16,13.5,3.5,3.5,0,0,1,12.5,17Z"
        />
      </g>
    </svg>
  </button>
</div>

iconsDanger button

<button class="ray-button ray-button--primary ray-button--danger">
  Click Me
</button>
<button class="ray-button ray-button--primary ray-button--danger" disabled>
  Click Me
</button>
<button class="ray-button ray-button--primary ray-button--danger">
  Click Me
  <svg
    class="ray-button__icon"
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 25 25"
  >
    <g>
      <path
        d="M12.5,6C5.5964,6,0,12.6211,0,13.5S5.5964,21,12.5,21,25,14.4375,25,13.5,19.4036,6,12.5,6Zm0,11A3.5,3.5,0,1,1,16,13.5,3.5,3.5,0,0,1,12.5,17Z"
      />
    </g>
  </svg>
</button>
<button class="ray-button ray-button--primary ray-button--danger" disabled>
  Click Me
  <svg
    class="ray-button__icon"
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 25 25"
  >
    <g>
      <path
        d="M12.5,6C5.5964,6,0,12.6211,0,13.5S5.5964,21,12.5,21,25,14.4375,25,13.5,19.4036,6,12.5,6Zm0,11A3.5,3.5,0,1,1,16,13.5,3.5,3.5,0,0,1,12.5,17Z"
      />
    </g>
  </svg>
</button>

iconsDanger button (RTL)

<div dir="rtl">
  <button class="ray-button ray-button--primary ray-button--danger">
    לחץ עלי
  </button>
  <button class="ray-button ray-button--primary ray-button--danger" disabled>
    לחץ עלי
  </button>
  <button class="ray-button ray-button--primary ray-button--danger">
    לחץ עלי
    <svg
      class="ray-button__icon"
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 25 25"
    >
      <g>
        <path
          d="M12.5,6C5.5964,6,0,12.6211,0,13.5S5.5964,21,12.5,21,25,14.4375,25,13.5,19.4036,6,12.5,6Zm0,11A3.5,3.5,0,1,1,16,13.5,3.5,3.5,0,0,1,12.5,17Z"
        />
      </g>
    </svg>
  </button>
  <button class="ray-button ray-button--primary ray-button--danger" disabled>
    לחץ עלי
    <svg
      class="ray-button__icon"
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 25 25"
    >
      <g>
        <path
          d="M12.5,6C5.5964,6,0,12.6211,0,13.5S5.5964,21,12.5,21,25,14.4375,25,13.5,19.4036,6,12.5,6Zm0,11A3.5,3.5,0,1,1,16,13.5,3.5,3.5,0,0,1,12.5,17Z"
        />
      </g>
    </svg>
  </button>
</div>

iconsModifiers

Use these modifiers with .ray-button class.

SelectorDescription
.ray-button--primarySelector for applying primary button styles
.ray-button--secondarySelector for applying secondary button styles
.ray-button--dangerSelector for applying danger button styles
.ray-button--tertiarySelector for applying tertiary button styles
.ray-button--compactSelector for applying compact button styles
.ray-button--darkSelector for applying dark button styles