useButtonStyles

Resolve the background, foreground, and disabled styles for a given button type from the active theme. This is the same helper the built-in Button, ActionButton, IconButton, and MenuButton components use internally — use it to build custom buttons that stay consistent with the library's theming.

Usage

import { AnimatedPressable, useButtonStyles } from '@multinaire/ui';
import { Typography } from '@multinaire/ui';

function MyButton({ type = 'primary', disabled, onPress, title }) {
  const { style, foregroundColor, disabledStyle } = useButtonStyles(type);

  return (
    <AnimatedPressable
      disabled={disabled}
      style={[style, disabled && disabledStyle]}
      onPress={onPress}
    >
      <Typography color={foregroundColor}>{title}</Typography>
    </AnimatedPressable>
  );
}

Parameters

Parameter	Type	Description
type	ButtonType	One of 'primary', 'secondary', 'surface', 'success', 'warning', 'error'.

Return Value

Property	Type	Description
style	ViewProps['style']	Background color style for the given type (e.g. { backgroundColor: colors.primary }).
foregroundColor	ColorKeys	The matching foreground color key for content placed on the button (e.g. 'onPrimary', 'onBackground').
disabledStyle	ViewProps['style']	Style applied when the button is disabled ({ opacity: 0.5 }).

Type → color mapping

type	Background	Foreground
primary	colors.primary	onPrimary
secondary	colors.secondary	onSecondary
surface	colors.backgroundVariant	onBackground
success	colors.success	onPrimary
warning	colors.warning	onPrimary
error	colors.error	onPrimary

Notes

• Must be called inside a MultinaireUI.
• Pair with usePressableInteraction to add hover/press feedback to your custom button.