Chips

Usage

Chips are used for search tags, or as a way to list users. They come in three colors: light grey, dark grey, and blue (the "light", "dark", and "blue" themes, respectively).

/ `light` is the default theme and can be omitted from the arguments
= chip(text: "Standard Chip", theme: "light")
= chip(text: "Dark Color Scheme", theme: "dark")
= chip(text: "Blue Color Scheme", theme: "blue")

import { Chip } from 'n2-styles'

function myComponent(props) {
  return (
    /* `light` is the default theme and can be omitted from the arguments */
    <chip text="Standard Chip" theme="light" />
    <chip text="Dark Color Scheme" theme="dark" />
    <chip text="Blue Color Scheme" theme="blue" />
  );
}

<div class="chip grey lighten-3">Standard Chip</div>
<div class="chip grey darken-3 white-text">Dark Color Scheme</div>
<div class="chip blue white-text">Blue Color Scheme</div>

Chips with Images

Chips can take an image URL. They can also take a user object in lieu of text and will display the user's first and last name.

/ user => User(first_name: "John", last_name: "Doe")
= chip(user: user, image_url: "https://mdbootstrap.com/img/Photos/Avatars/avatar-1.jpg")
= chip(user: user, image_url: "https://mdbootstrap.com/img/Photos/Avatars/avatar-5.jpg", theme: "dark")
= chip(user: user, image_url: "https://mdbootstrap.com/img/Photos/Avatars/avatar-6.jpg", theme: "blue")

import { Chip } from 'n2-styles'

function myComponent(props) {
  /* props.user => { first_name: "John", last_name: "Doe" } */
  return (
    <chip user={props.user} imageUrl="https://mdbootstrap.com/img/Photos/Avatars/avatar-1.jpg" />
    <chip user={props.user} imageUrl="https://mdbootstrap.com/img/Photos/Avatars/avatar-5.jpg" theme="dark" />
    <chip user={props.user} imageUrl="https://mdbootstrap.com/img/Photos/Avatars/avatar-6.jpg" theme="blue" />
  );
}

<div class="chip grey lighten-3">
  <img alt="John Doe" src="https://mdbootstrap.com/img/Photos/Avatars/avatar-1.jpg">
  John Doe
</div>
<div class="chip grey darken-3 white-text">
  <img alt="John Doe" src="https://mdbootstrap.com/img/Photos/Avatars/avatar-5.jpg">
  John Doe
/div>
<div class="chip blue white-text">
  <img alt="John Doe" src="https://mdbootstrap.com/img/Photos/Avatars/avatar-6.jpg">
  John Doe
</div>

Dismissable Chips

Dismissable chips can be created by setting the actionable argument to true.

= chip(text: "Dismiss", actionable: true)
= chip(text: "These", theme: "dark", actionable: true)
= chip(text: "Chips", theme: "blue", actionable: true)

import { Chip } from 'n2-styles'

function myComponent(props) {
  return (
    <chip text="Dismiss" actionable=true />
    <chip text="These" theme="dark" actionable=true />
    <chip text="Chips" theme="blue" actionable=true />
  );
}

<div class="chip grey lighten-3 actionable">
  Dismiss
  <i class="close material-icons">close</i>
</div>
<div class="chip grey darken-3 white-text actionable">
  These
  <i class="close material-icons">close</i>
</div>
<div class="chip blue white-text actionable">
  Chips
  <i class="close material-icons">close</i>
</div>