Button with Text (Outline) for React

variant="outline" draws a border on the background and uses a muted hover. The default Button uses the primary fill. Outline is an action people should see, without it being the main one.

Outline keeps the page background and adds a border, so it still reads on a tinted surface. variant="secondary" brings its own muted fill. Cancel beside Save is a common outline. Duplicate in a toolbar is often secondary.

Replace the children. The demo says Button. Cancel, Back, or View details tells people what happens.

A delete is clearer as variant="destructive", which uses the danger color. Outline reads as optional. If every button in the row is an outline, none of them looks primary.

Only when you pass type="submit". The default type is button. A Cancel button should stay type="button" so it doesn't send the form.

The variant only sets the look. Pass your link with render, such as render={<a href="/pricing" />}. It still doesn't navigate until you do that.