@collab-ui/core/scss/components/activity-button/examples/size-56.html

Cisco Collab UI CSS Framework

<div class="cui-button__container--small">
  <button
    class="cui-button cui-button--circle cui-button--56 cui-activity cui-activity__chat"
    alt="Chat" type="button" aria-label="Chat">
    <span class="cui-button__children">
      <i class="icon icon-chat_24"></i>
    </span>
  </button>
  <div class="cui-button__label">Chat</div>
</div>
<div class="cui-button__container--small">
  <button
    class="cui-button cui-button--circle cui-button--56 cui-activity cui-activity__camera"
    alt="camera" type="button" aria-label="camera">
    <span class="cui-button__children">
      <i class="icon icon-camera_24"></i>
    </span>
  </button>
  <div class="cui-button__label">Camera</div>
</div>
<div class="cui-button__container--small">
  <button
    class="cui-button cui-button--circle cui-button--56 cui-activity cui-activity__contact-card"
    alt="Contact Card" type="button" aria-label="Contact Card">
    <span class="cui-button__children">
      <i class="icon icon-contact-card_24"></i>
    </span>
  </button>
  <div class="cui-button__label">Contact Card</div>
</div>
<div class="cui-button__container--small">
  <button
    class="cui-button cui-button--circle cui-button--56 cui-activity cui-activity__meetings"
    alt="meetings" type="button" aria-label="meetings">
    <span class="cui-button__children">
      <i class="icon icon-meetings_24"></i>
    </span>
  </button>
  <div class="cui-button__label">Meetings</div>
</div>
<div class="cui-button__container--small">
  <button
    class="cui-button cui-button--circle cui-button--56 cui-activity cui-activity__whiteboard"
    alt="whiteboard" type="button" aria-label="whiteboard">
    <span class="cui-button__children">
      <i class="icon icon-whiteboard_24"></i>
    </span>
  </button>
  <div class="cui-button__label">Whiteboard</div>
</div>
<div class="cui-button__container--small">
  <button
    class="cui-button cui-button--circle cui-button--56 cui-activity cui-activity__files"
    alt="files" type="button" aria-label="files">
    <span class="cui-button__children">
      <i class="icon icon-files_24"></i>
    </span>
  </button>
  <div class="cui-button__label">Files</div>
</div>
<div class="cui-button__container--small">
  <button
    class="cui-button cui-button--circle cui-button--56 cui-activity cui-activity__share-screen"
    alt="share-screen" type="button" aria-label="share-screen">
    <span class="cui-button__children">
      <i class="icon icon-share-screen_24"></i>
    </span>
  </button>
  <div class="cui-button__label">Share</div>
</div>
<div class="cui-button__container--small">
  <button
    class="cui-button cui-button--circle cui-button--56 cui-activity cui-activity__tasks"
    alt="tasks" type="button" aria-label="tasks">
    <span class="cui-button__children">
      <i class="icon icon-tasks_24"></i>
    </span>
  </button>
  <div class="cui-button__label">Tasks</div>
</div>