- Where to find it
- On the composer’s palette, labelled Button. Drag it onto the canvas to add one.
- Its settings
- 6 of them, in the “Selected Component” section of the Modify drawer.
- Provided by
- RuleCMS, in
@rulecms/source-components-react. Available to every team.
In plain English
The Button component is the control a visitor clicks: "Start free trial" on a landing page, "Download the report" beside a summary, "Contact sales" at the end of a pricing table. It is a real button as far as the browser is concerned, so it works with the keyboard, announces itself properly to screen readers, and behaves the way visitors expect without any of that having to be arranged.
It arrives already looking like something. A button dropped on the canvas is a solid blue medium button, because a control that starts unstyled is a control everyone has to style before it is usable. That starting look is called a preset, and it is a set of defaults rather than a set of rules: anything you set under Selected Column — a different background, a rounder corner, more padding — takes over from the preset, and everything you leave alone keeps it.
That is the part worth understanding, because it is what stops the two systems fighting. There is no colour setting on the button and no border setting either, and their absence is deliberate. Those live on the column, in the same place they live for every other component, so there is never a question about which of two colour settings is the one actually being used.
Buttons come in shapes beyond the obvious one. A button can be an outline rather than a fill, a soft tinted block, a plain word that behaves like a link, or a quiet ghost that only shows itself against its background. Those are the same component with a different preset, not different components to hunt for on the palette.
When you would use it
- The main action on a page — sign up, buy, book, download, get in touch.
- A secondary action beside a primary one, using a quieter preset so the two are clearly ranked.
- A link that needs to look like a button because it is the point of the section.
Its settings
These are the settings this component offers, in the order the Modify drawer lists them. Each has its own page.
| Setting | Label in the drawer | What it does |
|---|---|---|
| Button Style | Button Style | The button's ready-made look, chosen as a variant, a tone, and a size. |
| Label | Label | The words on the button. |
| Link | Link | Where the button goes when someone clicks it. |
| Icon | Icon | An optional symbol shown beside the button label. |
| Icon Position | Icon Position | Whether the button's icon sits before or after the label. |
| Disabled | Disabled | Renders the button dimmed and not clickable. |
Watch out for
- Say what happens next. "Start free trial" works; "Submit" and "Click here" do not.
- One primary button per section. If three things all shout, the visitor reads none of them as the main action — make the others outline or ghost.
- Colour, border, radius, padding, and width are column settings, not button settings. Open "Selected Column" for those. The button supplies sensible values and gets out of the way when you set your own.
- A button whose label you clear becomes icon-only, and an icon-only button is silent to a screen reader unless it is given a written name.
- Buttons do not do anything on click yet beyond going to an address. Actions such as submitting a form or opening a dialog are not available.
Where to go next
- All RuleCMS components
- Attribute Reference — the column and row settings that shape how this component sits on the page: spacing, size, colour, and typography.
- The Composer — the editing surface it lives in.