The Action button component shows a button that opens a link: in a new tab, in place of the page, in a modal window or in a panel. You write the button's text and format it directly on the page: style, icon, color, corner radius and alignment.

This article describes the web part's use cases, how to get started, its settings, formatting the button on the page and the best practices to follow.

📋 Contents

1. About the component
2. Add the component to your page
3. Configure the component
4. Enter and format the button on the page
5. Best practices
6. What changes from the previous version

1. About the component

The Action button shows a single button. On click, your visitors open the link you chose. The button can be Filled, Outline or Text, with or without an icon.

💡 The component has no title, no background and no frame: only the button shows on the page. It always shows, even without a link.

Use cases

• Open a request form without leaving the page.
• Give access to a business tool, such as your HR application.
• Point to a booking page.
• Highlight a key page of your intranet.

2. Add the component to your page

1. Open the SharePoint page in edit mode by clicking Edit at the top right.
2. Where you want the component, click the "+" button to open the web part catalog.
3. Search or scroll the catalog to select Jint - Action button, in the "Text, media, and content" category.
4. The component is added where you want it, with its default values.

A newly inserted Action button is a Filled button, Large, centered, in your SharePoint site's main color. Its text is empty: it shows "Click here" as placeholder text, visible in edit mode only.

⚠ As long as you haven't entered any text, your visitors see an empty button. Enter the button's text on the page (see part 4), then choose its link in the panel.

3. Configure the component

The configuration panel has three tabs: Design, Content and Visibility. Each setting applies immediately on the page.

3.1 Design tab

Button size

• Small, Medium and Large set the button's height. Its width follows the length of its text.
• Click the Custom size button to set the height and width to the pixel. The Height (px) and Width (px) fields appear, set to the button's current size.

💡 With a custom size, the button can't be smaller than its text and icon: if a value goes below this minimum, it goes back up on its own. A width larger than the column is brought back to the column's width.

3.2 Content tab

Button action

• Action: the button opens a web address, the only action available.
• Direct link: enter the address of the page to open.
• Open in chooses where the link opens:
• A new tab: the page opens in a new browser tab.
• The same tab: the page replaces the current page.
• A modal window: the page opens in a window, over the current page.
• A panel: the page opens in a panel on the side. Panel width then appears to choose its width.

⚠ A link to an email address or a phone number always opens as in a new tab, and a link to an anchor on the page always in the same tab, whatever you chose in Open in.

⚠ As long as Direct link doesn't hold a valid address, the button does nothing on click.

3.3 Visibility tab

Audience

Turn on Custom audience to restrict the component to people or to members of Microsoft 365 groups. Only the chosen visitors, or members of at least one chosen group, see it. For everyone else, it takes up no space on the page.

Display

Turn on Schedule visibility to limit the display in time, with a Display start, a Display end, or both. Each date appears when you turn its switch on: the start is set to the present moment, the end to 7 days later.

⚠ If you turn on Custom audience without choosing anyone, no one sees the component anymore. The section warns you: "No one can see this web part: choose at least one person or group."

⚠ If the display end comes before the start, the panel shows "The end date must be later than the start date." and the schedule doesn't limit the display until you fix it.

💡 In edit mode, you always see the component, whatever its audience or schedule. A badge tells you so: "Audience", or the display dates.

4. Enter and format the button on the page

The button's text and style are set directly on the page, not in the configuration panel. Click the button: its text becomes editable and a toolbar shows above it. Click outside the button and the toolbar to confirm.

⚠ In edit mode, clicking the button doesn't open its link. Test the link on the published page.

Enter the text

• The text always fits on one line.
• If it doesn't fit in the button, it's cut with an ellipsis "…". On hover, your visitors read the full text in a tooltip.

Format the button

The toolbar sets the Font, the Font size (from 8 to 120 px), the Text color, bold, italic, underline and alignment, as well as:

• By default, the text is 16 px and the button is centered in its column. Alignment places the button on the left, in the center or on the right.
• Each change applies to the button's whole text, whatever your selection.
• Fill color colors the background of a Filled button and the outline of an Outline button. A Text button has neither background nor outline.
• Choose icon appears with Icon left, Icon right or Icon only.
• Icon only: the button shows only its icon, and its name on hover. If you go back to another choice, the button's text comes back as it was.
• The Decrease corner radius and Increase corner radius buttons change the radius one pixel at a time.
• The reset button sets the style, icon, fill color and corner radius back to their default values.

5. Best practices

Write a short, active text

Start with a verb that says what will happen: "Submit a request", "Book a room". A short text avoids being cut.

One action per button

To offer several links, add several buttons, with a Filled style for the main action and Outline or Text for the others.

Keep your visitors on the page

For a form or a short page, choose A modal window or A panel: your visitors get back to the page by closing the window.

Keep icon only for self-explanatory icons

With Icon only, your visitors only read a name on hover. Choose an icon that speaks for itself, such as Email or Calendar.

6. What changes from the previous version

If you used the previous version of the component (see the article Composant Bouton d'Action):

• The component is now called Jint - Action button in the catalog, in the "Text, media, and content" category.
• The button opens a web address. Opening a Power Apps application by its ID is no longer available.
• The button's text, style, color, corner radius and alignment are set directly on the page, with the button toolbar, and no longer in the panel.
• The Semi-rounded, Rounded and Round options give way to Corner radius, set to the pixel.
• The "Without border" style becomes Text.
• The button shadow is no longer available.
• New: an icon on the left, on the right or alone, chosen among ten.
• New: a Custom size, set to the pixel in height and width.
• The panel has three tabs, Design, Content and Visibility. The Visibility tab lets you restrict the component to an audience and schedule its display.