Design consistent button states in FileMaker

A button should remain readable while someone points at it, presses it or reaches it with a keyboard. If only the normal state is styled, the other states can introduce surprising colors, cramped labels or an invisible icon.

Start with one ordinary action, such as “Save contact,” in a working copy of your FileMaker file. The aim is a small, reusable set of styles. FileMaker Pro is required and sold separately.

1. Separate action importance from interaction state.

Primary and secondary actions describe importance in your interface. Normal, Hover, Pressed and In Focus describe interaction. A secondary action still needs a visible focus state; a hover color does not make an action primary.

Choose one primary action for a task and keep destructive actions distinct in wording and placement. Use labels that name the action, such as “Save contact” or “Delete note,” rather than expecting the icon or color to explain it.

2. Sketch the states before styling.

Save contact

Normal

Save contact

Hover

Save contact

Pressed

Save contact

In Focus

Design illustration in the browser, not a FileMaker screenshot or interactive buttons. Keep the label, size and position stable across states.

In this example, the fill changes modestly for hover and press, while focus adds a separate outline. Use enough contrast in every state. Do not rely on a subtle color shift alone to show keyboard focus or a persistent selection.

3. Style the object and its components.

In Layout mode, select the button and open the Inspector’s Appearance tab. Choose the relevant object component, then a display state from the state list. Adjust fill, border, text and padding, and repeat for the states supported by that object.

Check the icon component separately if the button uses an icon. An SVG with a fixed fill may not adopt your chosen icon color. The recolorable SVG walkthrough explains how to prepare a simple icon.

Available states depend on the object and component. A button bar’s active segment is a persistent selection; Pressed describes the moment of interaction. Do not assume every object exposes the same state menu. See Claris’s display-state reference.

4. Save and reuse the style deliberately.

Give the finished style a name that describes its purpose, such as Action / Primary. Use a separate style for secondary actions instead of applying ad hoc colors to each button.

Review the scope of a style change before saving it: other objects using that style may be affected. Save the style and theme changes through FileMaker’s controls, then inspect another layout that uses them. Keep your working theme variation separate from the original while experimenting.

A named style is useful only if its variants remain consistent. Check icon padding, label alignment and longer labels, not just the short text on the sample button.

5. Make unavailable actions behave correctly.

A gray appearance alone does not prevent a script from running. If an action is unavailable, implement the rule in the action’s script and make the interface explain it. For example, a follow-up action can tell the user to select a contact first.

Do not confuse a visual treatment with access control. A script still needs to validate the current context and the operation’s outcome, even when the button looks unavailable or is hidden.

6. Review real interactions.

In Browse mode, inspect the normal, pointer-hover and pressed appearance.
Where keyboard navigation is supported and configured, move focus to the button and verify its location is obvious.
Test the longest translated or dynamic label you expect.
On FileMaker Go, check the touch interaction and target spacing; do not depend on hover to reveal essential instructions.
If you deploy WebDirect, review the browser behavior separately.

Use actual target devices before releasing a file. A browser illustration and a desktop layout preview cannot confirm native interaction. Filesoft’s paid themes can provide a starting style system; the free sample lets you inspect a smaller selection first.

PUT IT INTO PRACTICE