Matrix button

Interactive documentation for the matrix button component. Change props in the playground, inspect states, and copy the generated example.

clicks: 0

Preview

Code

<MatrixButton
  name="Button"
>
  Button
</MatrixButton>

States

MatrixButton wraps PrimaryButton with color="midnight" and type="cocaine". Availability controls the final disabled state.

Default

Disabled

Unavailable

Selected

Combinations

Common combinations for available, disabled, and selected states.

availabledisabledselectedResult
truefalsefalse
truetruefalse
falsefalsefalse
truefalsetrue
falsefalsetrue

Props

This table matches the current MatrixButtonProps interface.

PropTypeDefaultDescription
namestring''Fallback button text rendered inside the default slot when no slot content is provided.
size'xl''xl'Button size. MatrixButton currently supports only xl and passes it directly to PrimaryButton.
disabledbooleanfalseDisables the button when available is true. If available is false, the button is always disabled.
availablebooleantrueControls availability state. When false, the button is disabled and receives the crossed background style.
selectedbooleanfalseAdds selected visual state with midnight border and outline classes.