Button Groups

1 component in this section

Button Group

Joined group of buttons with shared borders and no gap

<div class="dg-action-group">
  <button type="button" class="dg-btn dg-btn--primary">Primary</button>
  <button type="button" class="dg-btn dg-btn--secondary">Secondary</button>
  <button type="button" class="dg-btn dg-btn--ghost">Ghost</button>
</div>
import { ActionGroup, Btn } from '@deepgram/styles/react';

<ActionGroup>
  <Btn primary type="button">Primary</Btn>
  <Btn secondary type="button">Secondary</Btn>
  <Btn ghost type="button">Ghost</Btn>
</ActionGroup>
<script type="module">
  import '@deepgram/styles/wc';
</script>

<dg-action-group>
  <dg-btn primary type="button">Primary</dg-btn>
  <dg-btn secondary type="button">Secondary</dg-btn>
  <dg-btn ghost type="button">Ghost</dg-btn>
</dg-action-group>

Multiple Actions

Joined group of buttons with shared borders and no gap

<div class="dg-action-group">
  <button type="button" class="dg-btn dg-btn--primary">Save Changes</button>
  <button type="button" class="dg-btn dg-btn--ghost">Cancel</button>
</div>
import { ActionGroup, Btn } from '@deepgram/styles/react';

<ActionGroup>
  <Btn primary type="button">Save Changes</Btn>
  <Btn ghost type="button">Cancel</Btn>
</ActionGroup>
<script type="module">
  import '@deepgram/styles/wc';
</script>

<dg-action-group>
  <dg-btn primary type="button">Save Changes</dg-btn>
  <dg-btn ghost type="button">Cancel</dg-btn>
</dg-action-group>

Action Group with Icons

Joined group of buttons with shared borders and no gap

<div class="dg-action-group">
  <button type="button" class="dg-btn dg-btn--primary">
    <i class="fas fa-play"></i>
    Start
  </button>
  <button type="button" class="dg-btn dg-btn--danger-ghost">
    <i class="fas fa-stop"></i>
    Stop
  </button>
</div>
import { ActionGroup, Btn } from '@deepgram/styles/react';

<ActionGroup>
  <Btn primary type="button">
    <i className="fas fa-play" />
    Start
  </Btn>
  <Btn dangerGhost type="button">
    <i className="fas fa-stop" />
    Stop
  </Btn>
</ActionGroup>
<script type="module">
  import '@deepgram/styles/wc';
</script>

<dg-action-group>
  <dg-btn primary type="button">
    <i class="fas fa-play"></i>
    Start
  </dg-btn>
  <dg-btn danger-ghost type="button">
    <i class="fas fa-stop"></i>
    Stop
  </dg-btn>
</dg-action-group>

Theme Toggle

Three-button group for switching between light, dark, and system color schemes

<script type="module">
  import { setDark, setLight, setSystem } from '@deepgram/styles/utils';
  // Expose to inline handlers
  window.setDark = setDark;
  window.setLight = setLight;
  window.setSystem = setSystem;
</script>
<div class="dg-action-group">
  <button type="button" class="dg-btn dg-btn--primary" onclick="setLight()">
    <i class="fas fa-sun"></i>
    Light
  </button>
  <button type="button" class="dg-btn dg-btn--primary" onclick="setDark()">
    <i class="fas fa-moon"></i>
    Dark
  </button>
  <button type="button" class="dg-btn dg-btn--primary" onclick="setSystem()">
    <i class="fas fa-desktop"></i>
    System
  </button>
</div>
import { ActionGroup, Btn } from '@deepgram/styles/react';
import { setDark, setLight, setSystem } from '@deepgram/styles/utils';

<ActionGroup>
  <Btn primary type="button" onClick={setLight}>
    <i className="fas fa-sun" />
    Light
  </Btn>
  <Btn primary type="button" onClick={setDark}>
    <i className="fas fa-moon" />
    Dark
  </Btn>
  <Btn primary type="button" onClick={setSystem}>
    <i className="fas fa-desktop" />
    System
  </Btn>
</ActionGroup>
<script type="module">
  import '@deepgram/styles/wc';
</script>

<dg-action-group>
  <dg-btn primary type="button" onclick="setLight()">
    <i class="fas fa-sun"></i>
    Light
  </dg-btn>
  <dg-btn primary type="button" onclick="setDark()">
    <i class="fas fa-moon"></i>
    Dark
  </dg-btn>
  <dg-btn primary type="button" onclick="setSystem()">
    <i class="fas fa-desktop"></i>
    System
  </dg-btn>
</dg-action-group>