Configure reusable button styles

Open Settings → POM Theme → Design system → Buttons to define one default button and any additional styles needed for distinct actions.

Configure the default button

The default style supplies the base presentation for compatible buttons. Configure:

• Button name;
• text color;
• solid, gradient, or transparent background;
• gradient colors and direction when selected;
• per-side border width, border color, style, and radius;
• optional advanced box shadow;
• font, weight, text transform, line height, and letter spacing;
• the corresponding Hover options and supported icon or color effects.

Start with the normal state, then design hover without changing the button's size so much that surrounding content moves.

Under Hover options, Hover background colors can use custom colors or derive colors that are 20% darker or lighter than the normal background. For a gradient background, the selected adjustment applies to both gradient colors.

Box shadow (advanced) accepts a standard CSS box-shadow value. Use none by itself to remove the shadow, or separate multiple actual shadows with commas.

Add an alternate style

Under Additional button styles:

1. add a button entry;
2. enter a descriptive Button name;
3. enter a short Button slug such as secondary or danger;
4. configure normal and hover states;
5. save the subsection;
6. select the style in a compatible Button, form, or theme control.

POM sanitizes slugs and replaces missing or duplicate values when the settings are saved. After a style is in use, keep its slug stable so existing selections continue to refer to the same design.

Use a restrained set

Create styles by purpose:

• primary action;
• secondary action;
• quiet or text-like action;
• destructive action when the product needs one.

Do not create a new global style for a single page's spacing or label.

Review every state

Place the styles on light and dark representative backgrounds. Check normal, hover, keyboard focus, active, and disabled contexts where the consuming component provides them. Text and icons must remain readable, and color must not be the only distinction between actions.

If one instance looks different, inspect that component's selected style, size, full-width option, and local classes before changing the global button.