Callout Types
Note
Just a simple callout with only the defaults.
Note: Custom title
A simple note callout with a custom title.
Tip
A simple
tip callout to see what it looks like.Warning
A simple
warning callout to see what it looks like.Danger
A simple
danger callout to see what it looks like.Success
A simple
success callout to see what it looks like.Failure
A simple
failure callout to see what it looks like.Ordered and Unordered Lists
- First item
- Second item
- Nested item
- Another nested item
- Third item
- A thing
- Another thing
- A third thing! Who’d have guessed?
- A nested thing
- And another
- Back to the main list
Buttons
Primary Button
Primary Button + Icon
Quiet Button
Quiet Button + Icon
Small Button
Medium Button
Large Button
LightBurn Dialogs
Icons
| Name | Use for | Regular | Rounded | Sharp | Outline | Outline Rounded | Outline Sharp |
|---|---|---|---|---|---|---|---|
| download | Download links | material-symbols:download | material-symbols:download-rounded | material-symbols:download-sharp | material-symbols:download-outline | material-symbols:download-outline-rounded | material-symbols:download-outline-sharp |
| open-in-new | External links | material-symbols:open-in-new | material-symbols:open-in-new-rounded | material-symbols:open-in-new-sharp | material-symbols:open-in-new-outline | material-symbols:open-in-new-outline-rounded | material-symbols:open-in-new-outline-sharp |
| arrow-forward | Internal links to new page | material-symbols:arrow-forward | material-symbols:arrow-forward-rounded | material-symbols:arrow-forward-sharp | material-symbols:arrow-forward-outline | material-symbols:arrow-forward-outline-rounded | material-symbols:arrow-forward-outline-sharp |
| arrow-back | Not currently used | material-symbols:arrow-back | material-symbols:arrow-back-rounded | material-symbols:arrow-back-sharp | material-symbols:arrow-back-outline | material-symbols:arrow-back-outline-rounded | material-symbols:arrow-back-outline-sharp |
| arrow-upward | Jump up the page | material-symbols:arrow-upward | material-symbols:arrow-upward-rounded | material-symbols:arrow-upward-sharp | material-symbols:arrow-upward-outline | material-symbols:arrow-upward-outline-rounded | material-symbols:arrow-upward-outline-sharp |
| arrow-downward | Jump down the page | material-symbols:arrow-downward | material-symbols:arrow-downward-rounded | material-symbols:arrow-downward-sharp | material-symbols:arrow-downward-outline | material-symbols:arrow-downward-outline-rounded | material-symbols:arrow-downward-outline-sharp |
| quick-reference | Future use for docs links? | material-symbols:quick-reference | material-symbols:quick-reference-rounded | material-symbols:quick-reference-sharp | material-symbols:quick-reference-outline | material-symbols:quick-reference-outline-rounded | material-symbols:quick-reference-outline-sharp |
| info | Note callouts | material-symbols:info | material-symbols:info-rounded | material-symbols:info-sharp | material-symbols:info-outline | material-symbols:info-outline-rounded | material-symbols:info-outline-sharp |
| lightbulb-2 | Tip callouts | material-symbols:lightbulb-2 | material-symbols:lightbulb-2-rounded | material-symbols:lightbulb-2-sharp | material-symbols:lightbulb-2-outline | material-symbols:lightbulb-2-outline-rounded | material-symbols:lightbulb-2-outline-sharp |
| warning | Warning callouts | material-symbols:warning | material-symbols:warning-rounded | material-symbols:warning-sharp | material-symbols:warning-outline | material-symbols:warning-outline-rounded | material-symbols:warning-outline-sharp |
| report | Danger callouts | material-symbols:report | material-symbols:report-rounded | material-symbols:report-sharp | material-symbols:report-outline | material-symbols:report-outline-rounded | material-symbols:report-outline-sharp |
| check-circle | Success callouts | material-symbols:check-circle | material-symbols:check-circle-rounded | material-symbols:check-circle-sharp | material-symbols:check-circle-outline | material-symbols:check-circle-outline-rounded | material-symbols:check-circle-outline-sharp |
| cancel | Failure callouts | material-symbols:cancel | material-symbols:cancel-rounded | material-symbols:cancel-sharp | material-symbols:cancel-outline | material-symbols:cancel-outline-rounded | material-symbols:cancel-outline-sharp |




