diff --git a/packages/docs/pages/button-group.tsx b/packages/docs/pages/button-group.tsx
index cee38fe66..b404ff679 100644
--- a/packages/docs/pages/button-group.tsx
+++ b/packages/docs/pages/button-group.tsx
@@ -1,8 +1,8 @@
import { Box, ButtonGroup, H1, Panel, Text } from '@bigcommerce/big-design';
import { CheckIcon, InfoIcon } from '@bigcommerce/big-design-icons';
-import React from 'react';
+import React, { Fragment } from 'react';
-import { Code, CodePreview, ContentRoutingTabs, GuidelinesTable, List } from '../components';
+import { Code, CodePreview, ContentRoutingTabs, GuidelinesTable, List, NextLink } from '../components';
import { ButtonGroupPropTable } from '../PropTables';
const ButtonGroupPage = () => {
@@ -17,7 +17,7 @@ const ButtonGroupPage = () => {
When to use:
- In Tables
as a list of bulk actions available for the selected items.
+ In Tables as a list of bulk actions available for the selected items.
@@ -30,11 +30,11 @@ const ButtonGroupPage = () => {
id: 'basic',
title: 'Basic',
render: () => (
- <>
+
The ButtonGroup
component is used for grouping actions like{' '}
- Button
. Allows to save space and reduce visual overload when there are multiple
- actions available for the same entity.
+ Button. Allows to save space and reduce visual overload when
+ there are multiple actions available for the same entity.
@@ -52,14 +52,14 @@ const ButtonGroupPage = () => {
{/* jsx-to-string:end */}
- >
+
),
},
{
id: 'action-type-destructive',
title: 'Action type destructive',
render: () => (
- <>
+
By default action with actionsType: 'destructive'
hides under the ellipsis.
@@ -75,14 +75,14 @@ const ButtonGroupPage = () => {
/>
{/* jsx-to-string:end */}
- >
+
),
},
{
id: 'icon-property',
title: 'Icon property',
render: () => (
- <>
+
Icon is available only for actions which is hidden under the ellipsis.
@@ -100,7 +100,7 @@ const ButtonGroupPage = () => {
{/* jsx-to-string:end */}
- >
+
),
},
]}
@@ -114,15 +114,27 @@ const ButtonGroupPage = () => {
+ Hide secondary
actions or actions
that don’t fit the container under
+ ellipsis.
+ >,
+ <>
+ Hide destructive
actions under ellipsis.
+ >,
+ <>Keep all the controls in the same outlined style.>,
+ <>
+ Show only actions
that are available for the entity.
+ >,
]}
discouraged={[
- 'Move some controls to the second row.',
- 'Stylize some of the actions in the group differently (disabled, primary, destructive, etc.)',
- 'Use icons or text + icon for actions (except for ellipsis).',
+ <>Move some controls to the second row.>,
+ <>
+ Stylize some of the actions
in the group differently (disabled, primary, destructive,
+ etc.).
+ >,
+ <>
+ Use icons or text + icon for actions
(except for ellipsis).
+ >,
]}
/>