Buttons

Primary button

Download Info Package

Secondary button

Download Syllabus

Secondary Violet button

Apply Now

Secondary White button

Meet Our Graduates

Tertiary button

Get started for free

Submit button

Request city

{/* === BUTTONS === */}
{/* primary */}
<Button
  urlIsRelativePath
  href="/style-guide-components/#buttons"
  buttonStyle="primary"
  text="Download Info Package"
/>

{/* secondary */}
<Button
  urlIsRelativePath
  href="/style-guide-components/#buttons"
  buttonStyle="secondary"
  text="Download Syllabus"
/>

{/* secondaryviolet */}
<Button
  urlIsRelativePath
  href="/style-guide-components/#buttons"
  buttonStyle="secondaryviolet"
  text="Apply Now"
/>

{/* secondarywhite */}
<Button
  urlIsRelativePath
  href="/style-guide-components/#buttons"
  buttonStyle="secondarywhite"
  text="Meet Our Graduates"
/>

{/* tertiary */}
<Button
  urlIsRelativePath
  href="/style-guide-components/#buttons"
  buttonStyle="tertiary"
  text="Get started for free"
/>

{/* submit */}
<Button 
  type="submit" 
  buttonStyle="submit" 
  text="Request city" 
/>
                  

Carousel Arrows

Primary arrow

Primary Violet arrow

Secondary arrow

Transparent Background

{/* === CAROUSEL ARROWS === */}

{/* Direction of Arrow */}
{/* previous */}
<CarouselArrow 
  direction="previous"
  type="primary"
/>

{/* next */}
<CarouselArrow 
  direction="next"
  type="primaryviolet"
/>

{/* Type of Arrow */}
{/* primary */}
<CarouselArrow 
  direction="next"
  type="primary"
/>

{/* primaryviolet */}
<CarouselArrow 
  direction="next"
  type="primaryviolet"
/>

{/* secondary */}
<CarouselArrow 
  direction="next"
  type="primaryviolet"
/>

{/* Optional Prop: transparentBackground */}
<CarouselArrow 
  direction="next"
  type="secondary"
  transparentBackground
/>