menu
White logo

Buttons

Default Buttons

%button.btn.btn-primary{ type: "button" } Button
%button.btn.btn-primary{ type: "button", disabled: true} Disabled Button
= material_link_to "Link Button", "#"
= material_link_to "Disabled Link", "#", disabled: true
import { Button } from 'n2-styles'

function myComponent(props) {
  return (
    <Button>Button</Button>
    <Button disabled=true>Disabled Button</Button>
    <Button link="#">Link Button</Button>
    <Button disabled=true link="#">Disabled Link</Button>
  );
}
<button class="btn btn-primary" type="button">Regular</button>
<button class="btn btn-primary" disabled type="button">Disabled</button>
<a class="btn btn-primary" href="#">Link Button</a>
<a class="btn btn-primary disabled" href="#">Disabled Link</a>

Flat Buttons

= flat_link_to "Flat", "#"
= flat_link_to "Flat & Disabled", "#", disabled: true
import { Button } from 'n2-styles'

function myComponent(props) {
  return (
    <Button link="#" style="flat">Flat</Button>
    <Button disabled=true link="#" style="flat">Disabled Button</Button>
  );
}
<a class="btn-flat" href="#">Flat</a>
<a class="btn-flat disabled" href="#">Flat & Disabled</a>

Stroked Buttons

= stroked_link_to "Regular", "#"
= stroked_link_to "Colored", "#", class: "green-text"
import { Button } from 'n2-styles'

function myComponent(props) {
  return (
    <Button style="stroked" link="#" />Regular</Button>
    <Button className="green-text" link="#" style="stroked" />Colored</Button>
  );
}
<a class="btn-stroked" href="#">Regular</a>
<a class="btn-stroked green-text" href="#">Colored</a>

Icon Buttons

For icon buttons, make sure you add the aria-label (or the "label" attribute on the React component) describing the purpose of the button for accessibility.

= icon_link_to("menu", "#", aria: { label: "Menu" })
= white_icon_link_to("menu", "#", aria: { label: "Menu" })
import { IconButton } from 'n2-styles'

function myComponent(props) {
  return (
    <IconButton icon="menu" label="Menu" link="#" />
    <IconButton className="white-text" icon="menu" label="Menu" link="#" />
  );
}
<a class="btn-icon" href="#">
  <i class="material-icons" aria-label="Menu">menu</i>
</a>
<a class="btn-icon white-text" href="#">
  <i class="material-icons" aria-label="Menu">menu</i>
</a>

Card Buttons

= card do
  = card_header(title: "Permissions")
  = card_content do
    = card_body do
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dapibus
      tellus scelerisque accumsan pulvinar. Pellentesque rhoncus ante non
      eros porttitor, ut vulputate nulla scelerisque. Duis at ullamcorper
      enim. Nunc at consequat orci. Nulla consequat libero nisi.
    = card_footer do
      = material_link_to "Button", "#"
      = flat_link_to "Button", "#"
import {
  Button,
  Card,
  CardBody,
  CardContent,
  CardFooter,
  CardHeader
} from 'n2-styles';

function CardWithButtons({...props}) {
  return (
    <Card>
      <CardHeader title="Permissions" />
      <CardContent>
        <CardBody>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dapibus
          tellus scelerisque accumsan pulvinar. Pellentesque rhoncus ante non
          eros porttitor, ut vulputate nulla scelerisque. Duis at ullamcorper
          enim. Nunc at consequat orci. Nulla consequat libero nisi.
        </CardBody>
      </CardContent>
      <CardFooter>
        <Button text="Button" link="#" />
        <Button text="Button" link="#" style="flat" />
      </CardFooter>
    </Card>
  );
}

export { CardWithButtons };
<div class="card animated fadeIn">
  <div class="n2-card-header">
    <div>
      <h3 class="mb-0 grey-text text-darken-3">Permissions</h3>
    </div>
  </div>
  <div class="p-3">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dapibus tellus scelerisque accumsan pulvinar. Pellentesque rhoncus ante non eros porttitor, ut vulputate nulla scelerisque. Duis at ullamcorper enim. Nunc at consequat orci. Nulla consequat libero nisi.
  </div>
  <div class="n2-card-footer">
    <a class="btn btn-primary" href="#">Button</a>
    <a class="btn-flat" href="#">Button</a>
  </div>
</div>

Floating Action Buttons

= icon_link_to("add", "#", aria: { label: "Add Icon" }, class: "red btn-floating")
= icon_link_to("add", "#", aria: { label: "Add Icon" }, class: "red btn-floating btn-large")
import { IconButton } from 'n2-styles'

function myComponent(props) {
  return (
    <IconButton className="red" icon="add" label="Add Item" link="#" />
    <IconButton className="red btn-large" icon="add" label="Add Item" link="#" style="floating" />
  );
}
<a class="btn-floating red" href="#">
  <i class="material-icons" aria-label="Add Item">add</i>
</a>
<a class="btn-floating red btn-large" href="#">
  <i class="material-icons" aria-label="Add Item">add</i>
</a>

Button toggle with collapsible content

= flat_button_toggle target: "#hidden-content", on_button_text: "Hide Content", off_button_text: "Show Content"
/ You can add an optional data_attrs arg as well, e.g.:
/ = flat_button_toggle target: "#hidden-content", on_button_text: "Hide Hidden Content", off_button_text: "Show Hidden Content", data_attrs: { data: "thing" }
#hidden-content.collapse
  %p
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et ultrices
    lectus, non congue eros. Aliquam vestibulum, sem ac viverra pretium,
    odio ex pellentesque odio, eu suscipit nunc magna in mi. Aliquam erat
    volutpat. Proin vulputate ex dui, nec hendrerit augue consequat quis.
    Sed at porttitor est. Ut malesuada metus sem, nec malesuada sem
    varius eu. Cras non sollicitudin orci. Nulla facilisi.
  %p
    Integer commodo dui et mauris viverra, eget mattis nulla condimentum.
    Sed sit amet eros tellus. Quisque faucibus euismod elit, eu rhoncus augue
    euismod nec. Ut sit amet elit magna. Suspendisse sollicitudin nisi justo,
    id eleifend nisi pharetra nec. Suspendisse mollis augue ligula.
    Donec volutpat nulla vitae viverra imperdiet. Aenean sit amet quam magna.
    Quisque consequat mi id turpis lacinia varius. Duis pharetra diam
    nec viverra pellentesque. Nullam tincidunt ex elit.
import React from 'react';
import { useState } from 'react';
import { Button } from 'n2-styles';
import { Collapse } from 'react-bootstrap';

function ToggleContent({...props}) {
  const [active, setActive] = useState(false);

  return (
    <Button onClick={() => setActive(!active)} style="flat">
      {active ? "Hide Content" : "Show Content"}
    </Button>
    <Collapse in={active}>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et ultrices
        lectus, non congue eros. Aliquam vestibulum, sem ac viverra pretium,
        odio ex pellentesque odio, eu suscipit nunc magna in mi. Aliquam erat
        volutpat. Proin vulputate ex dui, nec hendrerit augue consequat quis.
        Sed at porttitor est. Ut malesuada metus sem, nec malesuada sem
        varius eu. Cras non sollicitudin orci. Nulla facilisi.
      </p>
      <p>
        Integer commodo dui et mauris viverra, eget mattis nulla condimentum.
        Sed sit amet eros tellus. Quisque faucibus euismod elit, eu rhoncus augue
        euismod nec. Ut sit amet elit magna. Suspendisse sollicitudin nisi justo,
        id eleifend nisi pharetra nec. Suspendisse mollis augue ligula.
        Donec volutpat nulla vitae viverra imperdiet. Aenean sit amet quam magna.
        Quisque consequat mi id turpis lacinia varius. Duis pharetra diam
        nec viverra pellentesque. Nullam tincidunt ex elit.
      </p>
    </Collapse>
  );
}

export { ToggleContent };

There is also an accompanying javascript event you can listen for when content is toggled.

$(".button-toggle").on('n2-styles:button-toggled', function(event, detail) {
  if (detail.isOn) {
    console.log("toggled on")
  } else {
    console.log("toggled off")
  }
})

Action Buttons Row

This component lives between the header and content area:

Example Action Buttons Row

.action-buttons-row
  .hidden.notes-sidenav{ data: { activates: "notes-nav" } }
  .notes-counter-container
    = material_link_to "Notes", '#', class: "notes-index-link"
    .white-text.notes-counter= "2"
// TODO