Buttons and Tags
Default button
Medium (default)
Radius:
Padding:
Large
Radius:
Padding:
Small
Radius:
Padding:
Default
How the button looks when it isn’t being interacted with, but is available to be interacted with. This could also be called the ‘Normal’ state.
.btn
.btn.btn-lg
.btn.btn-sm
Disabled
This is used if a process is loading as a way of blocking action, or in situations where the action is tied to a premium feature that requires upgrade before use. In both cases it should be paired with a tooltip to describe why the action is unavailable.
.btn[disabled]
.btn.btn-lg[disabled]
.btn.btn-sm[disabled]
Bordered button
Medium (default)
Radius:
Padding:
Large
Radius:
Padding:
Small
Radius:
Padding:
Default
How the button looks when it isn’t being interacted with, but is available to be interacted with. This could also be called the ‘Normal’ state.
.btn.btn-bordered
.btn.btn-bordered.btn-lg
.btn.btn-bordered.btn-sm
Disabled
This is used if a process is loading as a way of blocking action, or in situations where the action is tied to a premium feature that requires upgrade before use. In both cases it should be paired with a tooltip to describe why the action is unavailable.
.btn.btn-bordered[disabled]
.btn.btn-bordered.btn-lg[disabled]
.btn.btn-bordered.btn-sm[disabled]
Alternate button
Medium (default)
Radius:
Padding:
Large
Radius:
Padding:
Small
Radius:
Padding:
Default
How the button looks when it isn’t being interacted with, but is available to be interacted with. This could also be called the ‘Normal’ state.
.btn.btn-alternate
.btn.btn-alternate.btn-lg
.btn.btn-alternate.btn-sm
Disabled
This is used if a process is loading as a way of blocking action, or in situations where the action is tied to a premium feature that requires upgrade before use. In both cases it should be paired with a tooltip to describe why the action is unavailable.
.btn.btn-alternate[disabled]
.btn.btn-alternate.btn-lg[disabled]
.btn.btn-alternate.btn-sm[disabled]
Button tag
Usually used in active filters.
.btn.btn-tag
.btn.btn-tag.btn-lg
.btn.btn-tag.btn-sm
.btn.btn-tag.mod-close
.btn.btn-tag[disabled]
.btn.btn-tag.btn-lg[disabled]
.btn.btn-tag.btn-sm[disabled]
.btn.btn-tag.mod-close[disabled]
Button tags with bg color. Usually used for nudges, and article tags.
.btn.btn-tag-filled
.btn.btn-tag-filled.btn-lg
.btn.btn-tag-filled.btn-sm
.btn.btn-tag-filled.mod-close
.btn.btn-tag-filled[disabled]
.btn.btn-tag-filled.btn-lg[disabled]
.btn.btn-tag-filled.btn-sm[disabled]
.btn.btn-tag-filled.mod-close[disabled]
Non-clickable tags, use <span>tag
Button tag
span.btn.btn-tag
Button tag
span.btn.btn-tag-filled
Content tags, usually used in event type and nudges
Content tag
span.content-tag
Content tag
span.content-tag.content-tag-filled
Status tags
Not started
span.status-tag.status-tag-neutral
In progress
span.status-tag.status-tag-warning
Completed
span.status-tag.status-tag-success
Failed
span.status-tag.status-tag-danger
Info
span.status-tag.status-tag-info
Pending
span.status-tag.status-tag-pending
Bootstrap buttons - https://getbootstrap.com/docs/3.3/css/#buttons
Primary button
.btn.btn-primary
.btn.btn-primary.btn-lg
.btn.btn-primary.btn-sm
.btn.btn-primary[disabled]
.btn.btn-primary.btn-lg[disabled]
.btn.btn-primary.btn-sm[disabled]
Secondary button
.btn.btn-secondary
.btn.btn-secondary.btn-lg
.btn.btn-secondary.btn-sm
.btn.btn-secondary[disabled]
.btn.btn-secondary.btn-lg[disabled]
.btn.btn-secondary.btn-sm[disabled]
Tertiary button
.btn.btn-tertiary
.btn.btn-tertiary.btn-lg
.btn.btn-tertiary.btn-sm
.btn.btn-tertiary[disabled]
.btn.btn-tertiary.btn-lg[disabled]
.btn.btn-tertiary.btn-sm[disabled]
Success button
.btn.btn-success
.btn.btn-success.btn-lg
.btn.btn-success.btn-sm
.btn.btn-success[disabled]
.btn.btn-success.btn-lg[disabled]
.btn.btn-success.btn-sm[disabled]
Danger button
.btn.btn-danger
.btn.btn-danger.btn-lg
.btn.btn-danger.btn-sm
.btn.btn-danger[disabled]
.btn.btn-danger.btn-lg[disabled]
.btn.btn-danger.btn-sm[disabled]
Danger button - bordered
.btn.btn-danger-bordered
.btn.btn-danger-bordered.btn-lg
.btn.btn-danger-bordered.btn-sm
.btn.btn-danger-bordered[disabled]
.btn.btn-danger-bordered.btn-lg[disabled]
.btn.btn-danger-bordered.btn-sm[disabled]
Warning button
.btn.btn-warning
.btn.btn-warning.btn-lg
.btn.btn-warning.btn-sm
.btn.btn-warning[disabled]
.btn.btn-warning.btn-lg[disabled]
.btn.btn-warning.btn-sm[disabled]
Info button
.btn.btn-info
.btn.btn-info.btn-lg
.btn.btn-info.btn-sm
.btn.btn-info[disabled]
.btn.btn-info.btn-lg[disabled]
.btn.btn-info.btn-sm[disabled]
Button link
.btn.btn-link[disabled]
.btn.btn-link.btn-lg[disabled]
.btn.btn-link.btn-sm[disabled]
.btn.btn-link.btn-link-success
.btn.btn-link.btn-link-danger
.btn.btn-link.btn-link-warning
.btn.btn-link.btn-link-info
.btn.btn-link.btn-link-primary
.btn.btn-link.btn-link-secondary
.btn.btn-link.btn-link-tertiary
Button with icon
.btn > .font-icon
.btn > .font-icon
.btn > .font-icon
.btn > .fa
.btn.btn-arrow
.btn.btn-bordered.btn-arrow
Default button
Medium (default)
Radius:
Padding:
Large
Radius:
Padding:
Small
Radius:
Padding:
Default
How the button looks when it isn’t being interacted with, but is available to be interacted with. This could also be called the ‘Normal’ state.
.btn
.btn.btn-lg
.btn.btn-sm
Disabled
This is used if a process is loading as a way of blocking action, or in situations where the action is tied to a premium feature that requires upgrade before use. In both cases it should be paired with a tooltip to describe why the action is unavailable.
.btn[disabled]
.btn.btn-lg[disabled]
.btn.btn-sm[disabled]
Bordered button
Medium (default)
Radius:
Padding:
Large
Radius:
Padding:
Small
Radius:
Padding:
Default
How the button looks when it isn’t being interacted with, but is available to be interacted with. This could also be called the ‘Normal’ state.
.btn.btn-bordered
.btn.btn-bordered.btn-lg
.btn.btn-bordered.btn-sm
Disabled
This is used if a process is loading as a way of blocking action, or in situations where the action is tied to a premium feature that requires upgrade before use. In both cases it should be paired with a tooltip to describe why the action is unavailable.
.btn.btn-bordered[disabled]
.btn.btn-bordered.btn-lg[disabled]
.btn.btn-bordered.btn-sm[disabled]
Alternate button
Medium (default)
Radius:
Padding:
Large
Radius:
Padding:
Small
Radius:
Padding:
Default
How the button looks when it isn’t being interacted with, but is available to be interacted with. This could also be called the ‘Normal’ state.
.btn.btn-alternate
.btn.btn-alternate.btn-lg
.btn.btn-alternate.btn-sm
Disabled
This is used if a process is loading as a way of blocking action, or in situations where the action is tied to a premium feature that requires upgrade before use. In both cases it should be paired with a tooltip to describe why the action is unavailable.
.btn.btn-alternate[disabled]
.btn.btn-alternate.btn-lg[disabled]
.btn.btn-alternate.btn-sm[disabled]
Button tag
Usually used in active filters.
.btn.btn-tag
.btn.btn-tag.btn-lg
.btn.btn-tag.btn-sm
.btn.btn-tag.mod-close
.btn.btn-tag[disabled]
.btn.btn-tag.btn-lg[disabled]
.btn.btn-tag.btn-sm[disabled]
.btn.btn-tag.mod-close[disabled]
Button tags with bg color. Usually used for nudges, and article tags.
.btn.btn-tag-filled
.btn.btn-tag-filled.btn-lg
.btn.btn-tag-filled.btn-sm
.btn.btn-tag-filled.mod-close
.btn.btn-tag-filled[disabled]
.btn.btn-tag-filled.btn-lg[disabled]
.btn.btn-tag-filled.btn-sm[disabled]
.btn.btn-tag-filled.mod-close[disabled]
Non-clickable tags, use <span>tag
Button tag
span.btn.btn-tag
Button tag
span.btn.btn-tag-filled
Content tags, usually used in event type and nudges
Content tag
span.content-tag
Content tag
span.content-tag.content-tag-filled
Status tags
Not started
span.status-tag.status-tag-neutral
In progress
span.status-tag.status-tag-warning
Completed
span.status-tag.status-tag-success
Failed
span.status-tag.status-tag-danger
Info
span.status-tag.status-tag-info
Pending
span.status-tag.status-tag-pending
Bootstrap buttons - https://getbootstrap.com/docs/3.3/css/#buttons
Primary button
.btn.btn-primary
.btn.btn-primary.btn-lg
.btn.btn-primary.btn-sm
.btn.btn-primary[disabled]
.btn.btn-primary.btn-lg[disabled]
.btn.btn-primary.btn-sm[disabled]
Secondary button
.btn.btn-secondary
.btn.btn-secondary.btn-lg
.btn.btn-secondary.btn-sm
.btn.btn-secondary[disabled]
.btn.btn-secondary.btn-lg[disabled]
.btn.btn-secondary.btn-sm[disabled]
Tertiary button
.btn.btn-tertiary
.btn.btn-tertiary.btn-lg
.btn.btn-tertiary.btn-sm
.btn.btn-tertiary[disabled]
.btn.btn-tertiary.btn-lg[disabled]
.btn.btn-tertiary.btn-sm[disabled]
Success button
.btn.btn-success
.btn.btn-success.btn-lg
.btn.btn-success.btn-sm
.btn.btn-success[disabled]
.btn.btn-success.btn-lg[disabled]
.btn.btn-success.btn-sm[disabled]
Danger button
.btn.btn-danger
.btn.btn-danger.btn-lg
.btn.btn-danger.btn-sm
.btn.btn-danger[disabled]
.btn.btn-danger.btn-lg[disabled]
.btn.btn-danger.btn-sm[disabled]
Danger button - bordered
.btn.btn-danger-bordered
.btn.btn-danger-bordered.btn-lg
.btn.btn-danger-bordered.btn-sm
.btn.btn-danger-bordered[disabled]
.btn.btn-danger-bordered.btn-lg[disabled]
.btn.btn-danger-bordered.btn-sm[disabled]
Warning button
.btn.btn-warning
.btn.btn-warning.btn-lg
.btn.btn-warning.btn-sm
.btn.btn-warning[disabled]
.btn.btn-warning.btn-lg[disabled]
.btn.btn-warning.btn-sm[disabled]
Info button
.btn.btn-info
.btn.btn-info.btn-lg
.btn.btn-info.btn-sm
.btn.btn-info[disabled]
.btn.btn-info.btn-lg[disabled]
.btn.btn-info.btn-sm[disabled]
Button link
.btn.btn-link[disabled]
.btn.btn-link.btn-lg[disabled]
.btn.btn-link.btn-sm[disabled]
.btn.btn-link.btn-link-success
.btn.btn-link.btn-link-danger
.btn.btn-link.btn-link-warning
.btn.btn-link.btn-link-info
.btn.btn-link.btn-link-primary
.btn.btn-link.btn-link-secondary
.btn.btn-link.btn-link-tertiary
Button with icon
.btn > .font-icon
.btn > .font-icon
.btn > .font-icon
.btn > .fa
.btn.btn-arrow
.btn.btn-bordered.btn-arrow