This story is not configured to handle controls. Learn how to add controls
No inputs found for this component. Read the docs
| Name | Value | Preview |
|---|---|---|
| --border-radius-normal | 8px | |
| --border-radius-high | 20px | |
| --border-radius-circle | 50% |
| Name | Value | Preview |
|---|---|---|
| --color-white | #ffffff | |
| --color-black | #000000 |
| Name | Value | Preview |
|---|---|---|
| --color-grey-scale-050 | #fafafa | |
| --color-grey-scale-100 | #f5f5f5 | |
| --color-grey-scale-200 | #eeeeee | |
| --color-grey-scale-300 | #e0e0e0 | |
| --color-grey-scale-400 | #bdbdbd | |
| --color-grey-scale-500 | #9e9e9e | |
| --color-grey-scale-600 | #757575 | |
| --color-grey-scale-700 | #616161 | |
| --color-grey-scale-800 | #424242 | |
| --color-grey-scale-900 | #212121 |
| Name | Value | Preview |
|---|---|---|
| --color-blue-grey-scale-050 | #eceff1 | |
| --color-blue-grey-scale-100 | #CFD8DC | |
| --color-blue-grey-scale-200 | #B0BEC5 | |
| --color-blue-grey-scale-300 | #90A4AE | |
| --color-blue-grey-scale-400 | #78909C | |
| --color-blue-grey-scale-500 | #607D8B | |
| --color-blue-grey-scale-600 | #546E7A | |
| --color-blue-grey-scale-700 | #455A64 | |
| --color-blue-grey-scale-800 | #37474F | |
| --color-blue-grey-scale-900 | #263238 |
| Name | Value | Preview |
|---|---|---|
| --color-social-media-facebook | #4267B2 | |
| --color-social-media-google | #4688f1 |
| Name | Value | Preview |
|---|---|---|
| --color-pink-scale-050 | #fce4ec | |
| --color-pink-scale-100 | #f8bbd0 | |
| --color-pink-scale-200 | #f48fb1 | |
| --color-pink-scale-300 | #f06292 | |
| --color-pink-scale-400 | #ec407a | |
| --color-pink-scale-500 | #e91e63 | |
| --color-pink-scale-600 | #d81b60 | |
| --color-pink-scale-700 | #c2185b | |
| --color-pink-scale-800 | #ad1457 | |
| --color-pink-scale-900 | #880e4f | |
| --color-pink-scale-alpha-100 | #ff80ab | |
| --color-pink-scale-alpha-200 | #ff4081 | |
| --color-pink-scale-alpha-400 | #f50057 | |
| --color-pink-scale-alpha-700 | #c51162 |
| Name | Value | Preview |
|---|---|---|
| --color-purple-scale-050 | #f3e5f5 | |
| --color-purple-scale-100 | #e1bee7 | |
| --color-purple-scale-200 | #ce93d8 | |
| --color-purple-scale-300 | #ba68c8 | |
| --color-purple-scale-400 | #ab47bc | |
| --color-purple-scale-500 | #9c27b0 | |
| --color-purple-scale-600 | #8e24aa | |
| --color-purple-scale-700 | #7b1fa2 | |
| --color-purple-scale-800 | #6a1b9a | |
| --color-purple-scale-900 | #4a148c | |
| --color-purple-scale-alpha-100 | #ea80fc | |
| --color-purple-scale-alpha-200 | #e040fb | |
| --color-purple-scale-alpha-400 | #d500f9 | |
| --color-purple-scale-alpha-700 | #aa00ff |
| Name | Value | Preview |
|---|---|---|
| --color-red-scale-050 | #ffebee | |
| --color-red-scale-100 | #ffcdd2 | |
| --color-red-scale-200 | #ef9a9a | |
| --color-red-scale-300 | #e57373 | |
| --color-red-scale-400 | #ef5350 | |
| --color-red-scale-500 | #f44336 | |
| --color-red-scale-600 | #e53935 | |
| --color-red-scale-700 | #d32f2f | |
| --color-red-scale-800 | #c62828 | |
| --color-red-scale-900 | #b71c1c | |
| --color-red-scale-alpha-100 | #ff8a80 | |
| --color-red-scale-alpha-200 | #ff5252 | |
| --color-red-scale-alpha-400 | #ff1744 | |
| --color-red-scale-alpha-700 | #d50000 |
| Name | Value | Preview |
|---|---|---|
| --color-blue-scale-050 | #e3f2fd | |
| --color-blue-scale-100 | #bbdefb | |
| --color-blue-scale-200 | #90caf9 | |
| --color-blue-scale-300 | #64b5f6 | |
| --color-blue-scale-400 | #42a5f5 | |
| --color-blue-scale-500 | #2196f3 | |
| --color-blue-scale-600 | #1e88e5 | |
| --color-blue-scale-700 | #1976d2 | |
| --color-blue-scale-800 | #1565c0 | |
| --color-blue-scale-900 | #0d47a1 | |
| --color-blue-scale-alpha-100 | #82b1ff | |
| --color-blue-scale-alpha-200 | #448aff | |
| --color-blue-scale-alpha-400 | #2979ff | |
| --color-blue-scale-alpha-700 | #2962ff |
| Name | Value | Preview |
|---|---|---|
| --color-light-blue-scale-050 | #e1f5fe | |
| --color-light-blue-scale-100 | #b3e5fc | |
| --color-light-blue-scale-200 | #81d4fa | |
| --color-light-blue-scale-300 | #4fc3f7 | |
| --color-light-blue-scale-400 | #29b6f6 | |
| --color-light-blue-scale-500 | #03a9f4 | |
| --color-light-blue-scale-600 | #039be5 | |
| --color-light-blue-scale-700 | #0288d1 | |
| --color-light-blue-scale-800 | #0277bd | |
| --color-light-blue-scale-900 | #01579b | |
| --color-light-blue-scale-alpha-100 | #80d8ff | |
| --color-light-blue-scale-alpha-200 | #40c4ff | |
| --color-light-blue-scale-alpha-400 | #00b0ff | |
| --color-light-blue-scale-alpha-700 | #0091ea |
| Name | Value | Preview |
|---|---|---|
| --color-green-scale-050 | #e8f5e9 | |
| --color-green-scale-100 | #c8e6c9 | |
| --color-green-scale-200 | #a5d6a7 | |
| --color-green-scale-300 | #81c784 | |
| --color-green-scale-400 | #66bb6a | |
| --color-green-scale-500 | #4caf50 | |
| --color-green-scale-600 | #43a047 | |
| --color-green-scale-700 | #388e3c | |
| --color-green-scale-800 | #2e7d32 | |
| --color-green-scale-900 | #1b5e20 | |
| --color-green-scale-alpha-100 | #b9f6ca | |
| --color-green-scale-alpha-200 | #69f0ae | |
| --color-green-scale-alpha-400 | #00e676 | |
| --color-green-scale-alpha-700 | #00c853 |
| Name | Value | Preview |
|---|---|---|
| --color-yellow-scale-050 | #fffde7 | |
| --color-yellow-scale-100 | #fff9c4 | |
| --color-yellow-scale-200 | #fff59d | |
| --color-yellow-scale-300 | #fff176 | |
| --color-yellow-scale-400 | #ffee58 | |
| --color-yellow-scale-500 | #ffeb3b | |
| --color-yellow-scale-600 | #fdd835 | |
| --color-yellow-scale-700 | #fbc02d | |
| --color-yellow-scale-800 | #f9a825 | |
| --color-yellow-scale-900 | #f57f17 | |
| --color-yellow-scale-alpha-100 | #ffff8d | |
| --color-yellow-scale-alpha-200 | #ffff00 | |
| --color-yellow-scale-alpha-400 | #ffea00 | |
| --color-yellow-scale-alpha-700 | #ffd600 |
| Name | Value | Preview |
|---|---|---|
| --color-amber-scale-050 | #fff8e1 | |
| --color-amber-scale-100 | #ffecb3 | |
| --color-amber-scale-200 | #ffe082 | |
| --color-amber-scale-300 | #ffd54f | |
| --color-amber-scale-400 | #ffca28 | |
| --color-amber-scale-500 | #ffc107 | |
| --color-amber-scale-600 | #ffb300 | |
| --color-amber-scale-700 | #ffa000 | |
| --color-amber-scale-800 | #ff8f00 | |
| --color-amber-scale-900 | #ff6f00 | |
| --color-amber-scale-alpha-100 | #ffe57f | |
| --color-amber-scale-alpha-200 | #ffd740 | |
| --color-amber-scale-alpha-400 | #ffc400 | |
| --color-amber-scale-alpha-700 | #ffab00 |
| Name | Value | Preview |
|---|---|---|
| --color-support-success-scale-100 | var(--color-green-scale-050) | |
| --color-support-success-scale-200 | var(--color-green-scale-100) | |
| --color-support-success-scale-300 | var(--color-green-scale-300) | |
| --color-support-success-scale-400 | var(--color-green-scale-400) |
| Name | Value | Preview |
|---|---|---|
| --color-support-danger-scale-100 | var(--color-red-scale-050) | |
| --color-support-danger-scale-200 | var(--color-red-scale-200) | |
| --color-support-danger-scale-300 | var(--color-red-scale-300) | |
| --color-support-danger-scale-400 | var(--color-red-scale-400) |
| Name | Value | Preview |
|---|---|---|
| --color-support-warn-scale-100 | var(--color-yellow-scale-050) | |
| --color-support-warn-scale-200 | var(--color-yellow-scale-200) | |
| --color-support-warn-scale-300 | var(--color-yellow-scale-400) | |
| --color-support-warn-scale-400 | var(--color-yellow-scale-700) |
| Name | Value | Preview |
|---|---|---|
| --color-support-info-scale-100 | var(--color-light-blue-scale-050) | |
| --color-support-info-scale-200 | var(--color-light-blue-scale-200) | |
| --color-support-info-scale-300 | var(--color-light-blue-scale-300) | |
| --color-support-info-scale-400 | var(--color-light-blue-scale-400) |
| Name | Value | Preview |
|---|---|---|
| --shadow-s-001 | rgba(149, 157, 165, 0.2) 0px 8px 24px | |
| --shadow-s-002 | rgba(100, 100, 111, 0.2) 0px 7px 29px 0px | |
| --shadow-s-003 | rgba(0, 0, 0, 0.16) 0px 1px 4px | |
| --shadow-s-004 | rgba(99, 99, 99, 0.2) 0px 2px 8px 0px | |
| --shadow-e-000 | none | |
| --shadow-e-001 | 0 2px 1px -1px rgb(0 0 0 / 20%), 0 1px 1px 0 rgb(0 0 0 / 14%), 0 1px 3px 0 rgb(0 0 0 / 12%) | |
| --shadow-e-002 | 0 3px 1px -2px rgb(0 0 0 / 20%), 0 2px 2px 0 rgb(0 0 0 / 14%), 0 1px 5px 0 rgb(0 0 0 / 12%) | |
| --shadow-e-003 | 0 3px 3px -2px rgb(0 0 0 / 20%), 0 3px 4px 0 rgb(0 0 0 / 14%), 0 1px 8px 0 rgb(0 0 0 / 12%) | |
| --shadow-e-004 | 0 2px 4px -1px rgb(0 0 0 / 20%), 0 4px 5px 0 rgb(0 0 0 / 14%), 0 1px 10px 0 rgb(0 0 0 / 12%) | |
| --shadow-e-005 | 0 3px 5px -1px rgb(0 0 0 / 20%), 0 5px 8px 0 rgb(0 0 0 / 14%), 0 1px 14px 0 rgb(0 0 0 / 12%) | |
| --shadow-e-006 | 0 3px 5px -1px rgb(0 0 0 / 20%), 0 6px 10px 0 rgb(0 0 0 / 14%), 0 1px 18px 0 rgb(0 0 0 / 12%) | |
| --shadow-e-007 | 0 4px 5px -2px rgb(0 0 0 / 20%), 0 7px 10px 1px rgb(0 0 0 / 14%), 0 2px 16px 1px rgb(0 0 0 / 12%) | |
| --shadow-e-008 | 0 5px 5px -3px rgb(0 0 0 / 20%), 0 8px 10px 1px rgb(0 0 0 / 14%), 0 3px 14px 2px rgb(0 0 0 / 12%) | |
| --shadow-e-009 | 0 5px 6px -3px rgb(0 0 0 / 20%), 0 9px 12px 1px rgb(0 0 0 / 14%), 0 3px 16px 2px rgb(0 0 0 / 12%) | |
| --shadow-e-010 | 0 6px 6px -3px rgb(0 0 0 / 20%), 0 10px 14px 1px rgb(0 0 0 / 14%), 0 4px 18px 3px rgb(0 0 0 / 12%) | |
| --shadow-e-011 | 0 6px 7px -4px rgb(0 0 0 / 20%), 0 11px 15px 1px rgb(0 0 0 / 14%), 0 4px 20px 3px rgb(0 0 0 / 12%) | |
| --shadow-e-012 | 0 7px 8px -4px rgb(0 0 0 / 20%), 0 12px 17px 2px rgb(0 0 0 / 14%), 0 5px 22px 4px rgb(0 0 0 / 12%) | |
| --shadow-e-013 | 0 7px 8px -4px rgb(0 0 0 / 20%), 0 13px 19px 2px rgb(0 0 0 / 14%), 0 5px 24px 4px rgb(0 0 0 / 12%) | |
| --shadow-e-014 | 0 7px 9px -4px rgb(0 0 0 / 20%), 0 14px 21px 2px rgb(0 0 0 / 14%), 0 5px 26px 4px rgb(0 0 0 / 12%) | |
| --shadow-e-015 | 0 8px 9px -5px rgb(0 0 0 / 20%), 0 15px 22px 2px rgb(0 0 0 / 14%), 0 6px 28px 5px rgb(0 0 0 / 12%) | |
| --shadow-e-016 | 0 8px 10px -5px rgb(0 0 0 / 20%), 0 16px 24px 2px rgb(0 0 0 / 14%), 0 6px 30px 5px rgb(0 0 0 / 12%) | |
| --shadow-e-017 | 0 8px 11px -5px rgb(0 0 0 / 20%), 0 17px 26px 2px rgb(0 0 0 / 14%), 0 6px 32px 5px rgb(0 0 0 / 12%) | |
| --shadow-e-018 | 0 9px 11px -5px rgb(0 0 0 / 20%), 0 18px 28px 2px rgb(0 0 0 / 14%), 0 7px 34px 6px rgb(0 0 0 / 12%) | |
| --shadow-e-019 | 0 9px 12px -6px rgb(0 0 0 / 20%), 0 19px 29px 2px rgb(0 0 0 / 14%), 0 7px 36px 6px rgb(0 0 0 / 12%) | |
| --shadow-e-020 | 0 10px 13px -6px rgb(0 0 0 / 20%), 0 20px 31px 3px rgb(0 0 0 / 14%), 0 8px 38px 7px rgb(0 0 0 / 12%) | |
| --shadow-e-021 | 0 10px 13px -6px rgb(0 0 0 / 20%), 0 21px 33px 3px rgb(0 0 0 / 14%), 0 8px 40px 7px rgb(0 0 0 / 12%) | |
| --shadow-e-022 | 0 10px 14px -6px rgb(0 0 0 / 20%), 0 22px 35px 3px rgb(0 0 0 / 14%), 0 8px 42px 7px rgb(0 0 0 / 12%) | |
| --shadow-e-023 | 0 11px 14px -7px rgb(0 0 0 / 20%), 0 23px 36px 3px rgb(0 0 0 / 14%), 0 9px 44px 8px rgb(0 0 0 / 12%) | |
| --shadow-e-024 | 0 11px 15px -7px rgb(0 0 0 / 20%), 0 24px 38px 3px rgb(0 0 0 / 14%), 0 9px 46px 8px rgb(0 0 0 / 12%) |
| Name | Value | Preview |
|---|---|---|
| --size-base-nano | 1px | |
| --size-base-micro | 2px | |
| --size-base-extra-small | 4px | |
| --size-base-small | 8px | |
| --size-base-medium | 16px | |
| --size-base-large | 24px | |
| --size-base-extra-large | 32px | |
| --size-base-jumbo | 40px | |
| --size-base-extra-jumbo | 48px | |
| --size-base-giant | 56px | |
| --size-base-extra-giant | 64px | |
| --size-base-colossal | 72px | |
| --size-base-extra-colossal | 80px | |
| --size-base-mega | 88px | |
| --size-base-extra-mega | 96px | |
| --size-base-immense | 104px |
| Name | Value | Preview |
|---|---|---|
| --size-scalable-nano | 10px | |
| --size-scalable-micro | 12px | |
| --size-scalable-extra-small | 14px | |
| --size-scalable-small | 16px | |
| --size-scalable-medium | 18px | |
| --size-scalable-large | 20px | |
| --size-scalable-extra-large | 22px | |
| --size-scalable-jumbo | 24px | |
| --size-scalable-extra-jumbo | 26px | |
| --size-scalable-giant | 28px | |
| --size-scalable-extra-giant | 30px | |
| --size-scalable-colossal | 32px | |
| --size-scalable-extra-colossal | 34px | |
| --size-scalable-mega | 36px | |
| --size-scalable-extra-mega | 38px | |
| --size-scalable-immense | 40px |
| Name | Value | Preview |
|---|---|---|
| --color-theme-black | var(--color-black) | |
| --color-theme-white | var(--color-white) |
| Name | Value | Preview |
|---|---|---|
| --color-theme-primary | var(--color-theme-primary-900) | |
| --color-theme-secondary | var(--color-theme-secondary-500) | |
| --color-theme-grey | var(--color-blue-grey-scale-500) | |
| --color-theme-success | var(--color-support-success-scale-300) | |
| --color-theme-danger | var(--color-support-danger-scale-300) | |
| --color-theme-warn | var(--color-support-warn-scale-300) | |
| --color-theme-info | var(--color-support-info-scale-300) | |
| --color-theme-inverse | var(--color-theme-white) |