base styles
- colors
- fonts
atoms
- approved
- arrow
- blockquote
- brand
- button
- chip
- corner-label
- definition-list
- dot
- download-link
- fieldset
- figure
- flying-focus
- focus
- hamburger
- headings
- hide-text
- hr
- img
- input-checkbox
- input-error-message
- input-password
- input-radio
- input-submit
- input-text
- input-text-suffix
- label
- legend
- link
- list-item
- media
- notice
- ordered-list
- paragraph
- pill
- progress
- scale-indicator
- select
- source
- spinner
- status-icon
- survey-percentage
- table
- text-selection
- textarea
- toggle
- unordered-list
molecules
organisms
system
- flex
- grid
- helper-classes
templates-app
templates-website

button

Type: html-pattern & prestyled classes

Status: ready

Release: 0.3.0

Updated: 2.6.0

Dependencies:

no dependencies

Dependents:

molecules → tile
organisms → input-group
organisms → modal

example

description

styles element as button. the classes .btn and .button, and the html element button are styled by default in _helper.scss.

UPDATED 2.6.0:: vertically centered .tooltip info icon

UPDATED 2.4.0:: adjusted styles of .tooltip to support info icon

UPDATED 2.2.0:: added .outline version to .icontext

UPDATED 2.1.0:: moved .nav-back style to button

UPDATED 1.8.0:: .xs & .tooltip style for .btn.icon

UPDATED 1.7.4:: disabled style for .btn.icontext

UPDATED 1.7.0:: display: inline-flex; for .btn.icontext, so it's not possible to activate the button by clicking on its right.

UPDATED 1.5.2:: New .dark style for button .btn.icontext

UPDATED 1.5.0:: Added .btn.sm & .btn.lg, corrected padding of .btn.sm

UPDATED 1.1.0:: New button with ghost style and warning color on hover: .btn.ghost.warning

UPDATED 0.11.0:: New button which looks like a link with an icon: .btn.icontext

NOTE:: Updated in Release 0.5.0 corrected names in usage.

protected content

only loggeed in users are able to see source-code files and usage of components