<!-- AUTO-GENERATED FILE. Do not edit manually. -->

# Token Reference Table

This table lists all tokens for this component:

| Token | Description |
|-------|------------|
| container.background | Sets the background color of toast notifications (pop-up messages that appear temporarily to inform users about actions or status). This is the main background color that appears behind the toast content.<br>CSS variable: --wm-toast-container-background |
| container.color | Sets the text color of toast notifications (pop-up messages that appear temporarily to inform users). This should contrast well with the background for readability.<br>CSS variable: --wm-toast-container-color |
| container.width | Controls how wide toast notifications appear (pop-up messages that appear temporarily to inform users). This determines the horizontal size of the toast message box.<br>CSS variable: --wm-toast-container-width |
| container.shadow | Controls the drop shadow effect around toast notifications (pop-up messages that appear temporarily). This creates a subtle shadow that makes the toast appear to float above the background, giving it depth and elevation.<br>CSS variable: --wm-toast-container-shadow |
| container.border.radius | Controls the corner rounding of toast notifications (pop-up messages that appear temporarily). This makes the toast appear with slightly rounded corners for a softer appearance.<br>CSS variable: --wm-toast-container-border-radius |
| container.border.width | Controls the thickness of the border around toast notifications (pop-up messages that appear temporarily). This creates the outline that defines the toast shape and makes it visible to users.<br>CSS variable: --wm-toast-container-border-width |
| container.border.style | Controls the style of the border around toast notifications. 'solid' creates a continuous line, 'dashed' creates a dotted line, 'dotted' creates small dots, 'none' removes the border.<br>CSS variable: --wm-toast-container-border-style |
| container.border.color | Sets the color of the border around toast notifications (pop-up messages that appear temporarily). This determines the color of the outline that defines the toast shape.<br>CSS variable: --wm-toast-container-border-color |
| container.padding.block | Controls the vertical padding inside toast notifications (the space between the toast content and the top/bottom borders). This creates breathing room around the toast content vertically.<br>CSS variable: --wm-toast-container-padding-block |
| container.padding.inline | Controls the horizontal padding inside toast notifications (the space between the toast content and the left/right borders). This creates breathing room around the toast content horizontally.<br>CSS variable: --wm-toast-container-padding-inline |
| container.gap | Controls the spacing between different elements within toast notifications (like the space between the title and message text). This creates visual separation between toast content elements.<br>CSS variable: --wm-toast-container-gap |
| title.font-family | Sets the typeface (font style) for toast notification titles (the main heading text in pop-up messages). This determines whether the title text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-toast-title-font-family |
| title.font-weight | Controls how thick or bold the toast notification titles appear (the main heading text in pop-up messages). 'normal' makes it regular weight, 'bold' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-toast-title-font-weight |
| title.font-size | Controls how large the toast notification titles appear (the main heading text in pop-up messages). This affects the size of the title text that users see in the toast.<br>CSS variable: --wm-toast-title-font-size |
| title.line-height | Controls the vertical spacing between lines when toast notification titles wrap to multiple lines. This ensures proper spacing for the title text displayed in the toast.<br>CSS variable: --wm-toast-title-line-height |
| title.letter-spacing | Controls the horizontal spacing between individual characters in toast notification titles. This can help make the title text more readable and properly spaced.<br>CSS variable: --wm-toast-title-letter-spacing |
| message.font-family | Sets the typeface (font style) for toast notification messages (the descriptive text in pop-up messages). This determines whether the message text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-toast-message-font-family |
| message.font-weight | Controls how thick or bold the toast notification messages appear (the descriptive text in pop-up messages). 'normal' makes it regular weight, 'bold' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-toast-message-font-weight |
| message.font-size | Controls how large the toast notification messages appear (the descriptive text in pop-up messages). This affects the size of the message text that users see in the toast.<br>CSS variable: --wm-toast-message-font-size |
| message.line-height | Controls the vertical spacing between lines when toast notification messages wrap to multiple lines. This ensures proper spacing for the message text displayed in the toast.<br>CSS variable: --wm-toast-message-line-height |
| message.letter-spacing | Controls the horizontal spacing between individual characters in toast notification messages. This can help make the message text more readable and properly spaced.<br>CSS variable: --wm-toast-message-letter-spacing |
| icon.@ | Sets the icon content for toast notifications (the symbol that appears in pop-up messages to indicate the type of notification). This determines which icon symbol is displayed in the toast.<br>CSS variable: --wm-toast-icon |
| icon.size | Controls how large the toast notification icons appear (the symbols that appear in pop-up messages). This affects the size of the icon symbols that users see in the toast.<br>CSS variable: --wm-toast-icon-size |
| position.top | Controls the distance from the top of the screen where toast notifications appear (pop-up messages that appear temporarily). This determines how far down from the top edge the toast will be positioned.<br>CSS variable: --wm-toast-position-top |
| position.left | Controls the distance from the left edge of the screen where toast notifications appear (pop-up messages that appear temporarily). This determines how far from the left edge the toast will be positioned.<br>CSS variable: --wm-toast-position-left |
| position.right | Controls the distance from the right edge of the screen where toast notifications appear (pop-up messages that appear temporarily). This determines how far from the right edge the toast will be positioned.<br>CSS variable: --wm-toast-position-right |
| position.bottom | Controls the distance from the bottom of the screen where toast notifications appear (pop-up messages that appear temporarily). This determines how far up from the bottom edge the toast will be positioned.<br>CSS variable: --wm-toast-position-bottom |