# Ocelot.Social Documentation

Skip to main content

- Introduction
- Neo4J

- Backend

  - GraphQL
  - neo4j-graphql-js

- Webapp (Frontend)

  - Components
  - HTML
  - SCSS
  - Vue

- Testing Guide

  - End-to-end Tests
  - Webapp (Frontend) Tests
  - Backend Tests
- Deployment
- Contributing
- Feature Specification
- Code of Conduct
- Documentation
- License

#

April 5, 2026
Less than 1 minute

On This Page

- Button types
- Ghost buttons
- Button sizes
- Button full width
- Button states
- Icon buttons
- Button as links

## Button types

Use a primary button to draw the users attention to important actions. Use default buttons for less important actions.

A danger button should be used only for destructive actions.

    <ds-button>Default</ds-button>
    <ds-button primary>Primary</ds-button>
    <ds-button secondary>Secondary</ds-button>
    <ds-button danger>Danger</ds-button>

## Ghost buttons

Use a ghost button for secondary actions.

    <ds-button ghost>Default</ds-button>
    <ds-button ghost primary>Primary</ds-button>
    <ds-button ghost secondary>Secondary</ds-button>
    <ds-button ghost danger>Danger</ds-button>

## Button sizes

Use different sizes to create hierarchy.

    <ds-button size="small">Small</ds-button>
    <ds-button>Base</ds-button>
    <ds-button size="large">Large</ds-button>
    <ds-button size="x-large">very Large</ds-button>

## Button full width

    <ds-button fullwidth primary>Full Width</ds-button>

## Button states

A button can take different states.

    <ds-button>Default state</ds-button>
    <ds-button disabled>Disabled state</ds-button>
    <ds-button hover>Hover state</ds-button>
    <ds-button loading>Loading state</ds-button>

## Icon buttons

Add an icon to a button to help the user identify the button's action.

    <ds-button icon="arrow-left" primary>Click me</ds-button>
    <ds-button icon="arrow-right" right>Click me</ds-button>
    <ds-button icon="plus" primary></ds-button>
    <ds-button icon="plus" ghost></ds-button>

## Button as links

Provide a path to the button. You can pass a url string or a Vue router path object.

    <ds-button path="/navigation">Click me</ds-button>
    <ds-button :path="{ name: 'Navigation' }">Click me</ds-button>