Buttons

Primary Button

Default primary button element

HTML

React

Web Components

<button type="button" class="dg-btn dg-btn--primary">Primary Action</button>

import { Btn } from '@deepgram/styles/react';

<Btn primary type="button">Primary Action</Btn>

<script type="module">
  import '@deepgram/styles/wc';
</script>

<dg-btn primary type="button">Primary Action</dg-btn>

Primary Button as Link

Button styles applied to a link - perfect for navigation CTAs

HTML

React

Web Components

<a href="#" class="dg-btn dg-btn--primary">Get Started</a>


<a href="#" className="dg-btn dg-btn--primary">Get Started</a>

<script type="module">
  import '@deepgram/styles/wc';
</script>

<dg-btn primary href="#">Get Started</dg-btn>

Primary Button with Icon Before

Icon placed before text

HTML

React

Web Components

<button type="button" class="dg-btn dg-btn--primary">
  <i class="fas fa-play"></i>
  Start Recording
</button>

import { Btn } from '@deepgram/styles/react';

<Btn primary type="button">
  <i className="fas fa-play" />
  Start Recording
</Btn>

<script type="module">
  import '@deepgram/styles/wc';
</script>

<dg-btn primary type="button">
  <i class="fas fa-play"></i>
  Start Recording
</dg-btn>

Primary Link with Icon After

Link styled as button with trailing icon

HTML

React

Web Components

<a href="#" class="dg-btn dg-btn--primary">
  Continue
  <i class="fas fa-arrow-right"></i>
</a>


<a href="#" className="dg-btn dg-btn--primary">
  Continue
  <i className="fas fa-arrow-right" />
</a>

<script type="module">
  import '@deepgram/styles/wc';
</script>

<dg-btn primary href="#">
  Continue
  <i class="fas fa-arrow-right"></i>
</dg-btn>

Small Primary Button

Compact version for tight spaces

HTML

React

Web Components

<button type="button" class="dg-btn dg-btn--primary dg-btn--sm">Primary</button>

import { Btn } from '@deepgram/styles/react';

<Btn primary sm type="button">Save</Btn>

<script type="module">
  import '@deepgram/styles/wc';
</script>

<dg-btn primary sm type="button">Primary</dg-btn>

Small Primary Link

Compact link styled as button

HTML

React

Web Components

<a href="#" class="dg-btn dg-btn--primary dg-btn--sm">Sign Up</a>


<a href="#" className="dg-btn dg-btn--primary dg-btn--sm">Edit</a>

<script type="module">
  import '@deepgram/styles/wc';
</script>

<dg-btn primary sm href="#">Sign Up</dg-btn>

Custom Color Primary Button

Primary button with custom brand colors using CSS variables

HTML

React

Web Components

<div style="--dg-primary: #a855f7; --dg-secondary: #ec4899;">
  <button type="button" class="dg-btn dg-btn--primary">
    <i class="fas fa-sparkles"></i>
    Custom Purple Brand
  </button>
</div>

import { Btn } from '@deepgram/styles/react';

<div style={{ '--dg-primary': '#a855f7', '--dg-secondary': '#ec4899' }}>
  <Btn primary type="button">
    <i className="fas fa-sparkles" />
    Custom Purple Brand
  </Btn>
</div>

<script type="module">
  import '@deepgram/styles/wc';
</script>

<div style="--dg-primary: #a855f7; --dg-secondary: #ec4899;">
  <dg-btn primary type="button">
    <i class="fas fa-sparkles"></i>
    Custom Purple Brand
  </dg-btn>
</div>

Small Primary Button

Compact primary button for tight spaces

HTML

React

Web Components

<button type="button" class="dg-btn dg-btn--primary dg-btn--sm">Save</button>

import { Btn } from '@deepgram/styles/react';

<Btn primary sm type="button">Save</Btn>

<script type="module">
  import '@deepgram/styles/wc';
</script>

<dg-btn primary sm type="button">Save</dg-btn>

Small Primary Link

Compact link styled as primary button

HTML

React

Web Components

<a href="#" class="dg-btn dg-btn--primary dg-btn--sm">Edit</a>


<a href="#" className="dg-btn dg-btn--primary dg-btn--sm">Edit</a>

<script type="module">
  import '@deepgram/styles/wc';
</script>

<dg-btn primary sm href="#">Edit</dg-btn>

Small Secondary Button

Main call-to-action button with primary brand color

HTML

React

Web Components

<button type="button" class="dg-btn dg-btn--secondary dg-btn--sm">Cancel</button>

import { Btn } from '@deepgram/styles/react';

<Btn secondary sm type="button">Cancel</Btn>

<script type="module">
  import '@deepgram/styles/wc';
</script>

<dg-btn secondary sm type="button">Cancel</dg-btn>

Small Secondary Link

Main call-to-action button with primary brand color

HTML

React

Web Components

<a href="#" class="dg-btn dg-btn--secondary dg-btn--sm">View</a>


<a href="#" className="dg-btn dg-btn--secondary dg-btn--sm">More Info</a>

<script type="module">
  import '@deepgram/styles/wc';
</script>

<dg-btn secondary sm href="#">View</dg-btn>

Small Ghost Button

Main call-to-action button with primary brand color

HTML

React

Web Components

<button type="button" class="dg-btn dg-btn--ghost dg-btn--sm">Close</button>

import { Btn } from '@deepgram/styles/react';

<Btn ghost sm type="button">Close</Btn>

<script type="module">
  import '@deepgram/styles/wc';
</script>

<dg-btn ghost sm type="button">Close</dg-btn>

Small Ghost Link

Main call-to-action button with primary brand color

HTML

React

Web Components

<a href="#" class="dg-btn dg-btn--ghost dg-btn--sm">Skip</a>


<a href="#" className="dg-btn dg-btn--ghost dg-btn--sm">Skip</a>

<script type="module">
  import '@deepgram/styles/wc';
</script>

<dg-btn ghost sm href="#">Skip</dg-btn>

Secondary Button

Default secondary button element

HTML

React

Web Components

<button type="button" class="dg-btn dg-btn--secondary">Secondary Action</button>

import { Btn } from '@deepgram/styles/react';

<Btn secondary type="button">Secondary Action</Btn>

<script type="module">
  import '@deepgram/styles/wc';
</script>

<dg-btn secondary type="button">Secondary Action</dg-btn>

Secondary Button as Link

Button styles applied to a link

HTML

React

Web Components

<a href="#" class="dg-btn dg-btn--secondary">Learn More</a>


<a href="#" className="dg-btn dg-btn--secondary">Learn More</a>

<script type="module">
  import '@deepgram/styles/wc';
</script>

<dg-btn secondary href="#">Learn More</dg-btn>

Secondary Button with Icon Before

Icon placed before text

HTML

React

Web Components

<button type="button" class="dg-btn dg-btn--secondary">
  <i class="fas fa-download"></i>
  Download
</button>

import { Btn } from '@deepgram/styles/react';

<Btn secondary type="button">
  <i className="fas fa-download" />
  Download
</Btn>

<script type="module">
  import '@deepgram/styles/wc';
</script>

<dg-btn secondary type="button">
  <i class="fas fa-download"></i>
  Download
</dg-btn>

Secondary Link with Icon After

Link styled as button with trailing icon

HTML

React

Web Components

<a href="#" class="dg-btn dg-btn--secondary">
  View Docs
  <i class="fas fa-external-link-alt"></i>
</a>


<a href="#" className="dg-btn dg-btn--secondary">
  View Docs
  <i className="fas fa-external-link-alt" />
</a>

<script type="module">
  import '@deepgram/styles/wc';
</script>

<dg-btn secondary href="#">
  View Docs
  <i class="fas fa-external-link-alt"></i>
</dg-btn>

Small Secondary Button

Compact version for tight spaces

HTML

React

Web Components

<button type="button" class="dg-btn dg-btn--secondary dg-btn--sm">Cancel</button>

import { Btn } from '@deepgram/styles/react';

<Btn secondary sm type="button">Cancel</Btn>

<script type="module">
  import '@deepgram/styles/wc';
</script>

<dg-btn secondary sm type="button">Cancel</dg-btn>

Small Secondary Link

Compact link styled as secondary button

HTML

React

Web Components

<a href="#" class="dg-btn dg-btn--secondary dg-btn--sm">More Info</a>


<a href="#" className="dg-btn dg-btn--secondary dg-btn--sm">More Info</a>

<script type="module">
  import '@deepgram/styles/wc';
</script>

<dg-btn secondary sm href="#">More Info</dg-btn>

Ghost Button

Default ghost button element

HTML

React

Web Components

<button type="button" class="dg-btn dg-btn--ghost">Ghost Action</button>

import { Btn } from '@deepgram/styles/react';

<Btn ghost type="button">Ghost Action</Btn>

<script type="module">
  import '@deepgram/styles/wc';
</script>

<dg-btn ghost type="button">Ghost Action</dg-btn>

Ghost Button as Link

Button styles applied to a link

HTML

React

Web Components

<a href="#" class="dg-btn dg-btn--ghost">View Details</a>


<a href="#" className="dg-btn dg-btn--ghost">View Details</a>

<script type="module">
  import '@deepgram/styles/wc';
</script>

<dg-btn ghost href="#">View Details</dg-btn>

Ghost Button with Icon Before

Icon placed before text

HTML

React

Web Components

<button type="button" class="dg-btn dg-btn--ghost">
  <i class="fas fa-cog"></i>
  Settings
</button>

import { Btn } from '@deepgram/styles/react';

<Btn ghost type="button">
  <i className="fas fa-cog" />
  Settings
</Btn>

<script type="module">
  import '@deepgram/styles/wc';
</script>

<dg-btn ghost type="button">
  <i class="fas fa-cog"></i>
  Settings
</dg-btn>

Ghost Link with Icon After

Link styled as button with trailing icon

HTML

React

Web Components

<a href="#" class="dg-btn dg-btn--ghost">
  Explore
  <i class="fas fa-chevron-right"></i>
</a>


<a href="#" className="dg-btn dg-btn--ghost">
  Explore
  <i className="fas fa-chevron-right" />
</a>

<script type="module">
  import '@deepgram/styles/wc';
</script>

<dg-btn ghost href="#">
  Explore
  <i class="fas fa-chevron-right"></i>
</dg-btn>

Small Ghost Button

Compact version for tight spaces

HTML

React

Web Components

<button type="button" class="dg-btn dg-btn--ghost dg-btn--sm">Close</button>

import { Btn } from '@deepgram/styles/react';

<Btn ghost sm type="button">Close</Btn>

<script type="module">
  import '@deepgram/styles/wc';
</script>

<dg-btn ghost sm type="button">Close</dg-btn>

Small Ghost Link

Compact link styled as ghost button

HTML

React

Web Components

<a href="#" class="dg-btn dg-btn--ghost dg-btn--sm">Skip</a>


<a href="#" className="dg-btn dg-btn--ghost dg-btn--sm">Skip</a>

<script type="module">
  import '@deepgram/styles/wc';
</script>

<dg-btn ghost sm href="#">Skip</dg-btn>

Danger Ghost Button

Main call-to-action button with primary brand color

HTML

React

Web Components

<button type="button" class="dg-btn dg-btn--danger-ghost">Delete</button>

import { Btn } from '@deepgram/styles/react';

<Btn dangerGhost type="button">Delete</Btn>

<script type="module">
  import '@deepgram/styles/wc';
</script>

<dg-btn danger-ghost type="button">Delete</dg-btn>

Danger Ghost Button as Link

Main call-to-action button with primary brand color

HTML

React

Web Components

<a href="#" class="dg-btn dg-btn--danger-ghost">Remove Account</a>


<a href="#" className="dg-btn dg-btn--danger-ghost">Remove Account</a>

<script type="module">
  import '@deepgram/styles/wc';
</script>

<dg-btn danger-ghost href="#">Remove Account</dg-btn>

Danger Ghost Button with Icon

Main call-to-action button with primary brand color

HTML

React

Web Components

<button type="button" class="dg-btn dg-btn--danger-ghost">
  <i class="fas fa-trash"></i>
  Delete Recording
</button>

import { Btn } from '@deepgram/styles/react';

<Btn dangerGhost type="button">
  <i className="fas fa-trash" />
  Delete Recording
</Btn>

<script type="module">
  import '@deepgram/styles/wc';
</script>

<dg-btn danger-ghost type="button">
  <i class="fas fa-trash"></i>
  Delete Recording
</dg-btn>

Small Danger Ghost Button

Main call-to-action button with primary brand color

HTML

React

Web Components

<button type="button" class="dg-btn dg-btn--danger-ghost dg-btn--sm">Remove</button>

import { Btn } from '@deepgram/styles/react';

<Btn dangerGhost sm type="button">Remove</Btn>

<script type="module">
  import '@deepgram/styles/wc';
</script>

<dg-btn danger-ghost sm type="button">Remove</dg-btn>

Small Danger Ghost Link

Main call-to-action button with primary brand color

HTML

React

Web Components

<a href="#" class="dg-btn dg-btn--danger-ghost dg-btn--sm">Discard</a>


<a href="#" className="dg-btn dg-btn--danger-ghost dg-btn--sm">Discard</a>

<script type="module">
  import '@deepgram/styles/wc';
</script>

<dg-btn danger-ghost sm href="#">Discard</dg-btn>

Icon Button

Main call-to-action button with primary brand color

HTML

React

Web Components

<button type="button" class="dg-btn dg-btn--primary dg-btn--icon-only">
  <i class="fas fa-microphone"></i>
</button>

import { Btn } from '@deepgram/styles/react';

<Btn primary iconOnly type="button">
  <i className="fas fa-microphone" />
</Btn>

<script type="module">
  import '@deepgram/styles/wc';
</script>

<dg-btn primary icon-only type="button">
  <i class="fas fa-microphone"></i>
</dg-btn>

Small Icon Button

Main call-to-action button with primary brand color

HTML

React

Web Components

<button type="button" class="dg-btn dg-btn--ghost dg-btn--icon-only dg-btn--sm">
  <i class="fas fa-times"></i>
</button>

import { Btn } from '@deepgram/styles/react';

<Btn ghost iconOnly sm type="button">
  <i className="fas fa-times" />
</Btn>

<script type="module">
  import '@deepgram/styles/wc';
</script>

<dg-btn ghost icon-only sm type="button">
  <i class="fas fa-times"></i>
</dg-btn>

Collapse Primary Button

Main call-to-action button with primary brand color

HTML

React

Web Components

<button type="button" class="dg-btn dg-btn--primary dg-btn--collapse">Full Width on Mobile</button>

import { Btn } from '@deepgram/styles/react';

<Btn primary collapse type="button">Full Width on Mobile</Btn>

<script type="module">
  import '@deepgram/styles/wc';
</script>

<dg-btn primary collapse type="button">Full Width on Mobile</dg-btn>

Collapse Ghost Button

Main call-to-action button with primary brand color

HTML

React

Web Components

<button type="button" class="dg-btn dg-btn--ghost dg-btn--collapse">Responsive Ghost</button>

import { Btn } from '@deepgram/styles/react';

<Btn ghost collapse type="button">Responsive Ghost</Btn>

<script type="module">
  import '@deepgram/styles/wc';
</script>

<dg-btn ghost collapse type="button">Responsive Ghost</dg-btn>

Small Button

Secondary Button

Ghost Button

Danger Ghost Button

Icon Button

Collapse Button