Ray - Documentation

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.

Primary 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>

Primary 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>

Primary 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>

Secondary 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>

Secondary 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>

Secondary 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>

Tertiary 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>

Tertiary 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>

Tertiary 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>

Compact 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>

Compact 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>

Danger 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>

Danger 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>

Modifiers

Use these modifiers with .ray-button class.

Selector	Description
`.ray-button--primary`	Selector for applying primary button styles
`.ray-button--secondary`	Selector for applying secondary button styles
`.ray-button--danger`	Selector for applying danger button styles
`.ray-button--tertiary`	Selector for applying tertiary button styles
`.ray-button--compact`	Selector for applying compact button styles
`.ray-button--dark`	Selector for applying dark button styles

Component

Button

.cls-1{fill:none;}iconsPrimary button

.cls-1{fill:none;}iconsPrimary button dark

.cls-1{fill:none;}iconsPrimary button (RTL)

.cls-1{fill:none;}iconsSecondary button

.cls-1{fill:none;}iconsSecondary button dark

.cls-1{fill:none;}iconsSecondary button (RTL)

.cls-1{fill:none;}iconsTertiary button

.cls-1{fill:none;}iconsTertiary button dark

.cls-1{fill:none;}iconsTertiary button (RTL)

.cls-1{fill:none;}iconsCompact button

.cls-1{fill:none;}iconsCompact button (RTL)

.cls-1{fill:none;}iconsDanger button

.cls-1{fill:none;}iconsDanger button (RTL)

.cls-1{fill:none;}iconsModifiers