Atlas Design

API link button

The API link button presents an HTTP method and flexible API path as a full-width link. It uses standard control sizing with a clear hover treatment.

Place API link buttons inside an .api-link-button-container. The container establishes the inline-size context used to stack the method above the path when the container is 300px wide or narrower.

Default layout

get /openai/v1/responses/{response_id}
HTML 
<div class="api-link-button-container">
    <a class="api-link-button" href="#default-layout" aria-label="Get a response">
        <span class="api-link-button-method" data-method="get">get</span>
        <span class="api-link-button-text">/openai/v1/responses/{response_id}</span>
    </a>
</div>

Narrow layout

The narrow layout reduces the vertical gap between the method and path to keep the stacked link compact.

delete /openai/v1/responses/{response_id}
HTML 
<div class="api-link-button-container width-300">
    <a class="api-link-button" href="#narrow-layout" aria-label="Delete a response">
        <span class="api-link-button-method" data-method="delete">delete</span>
        <span class="api-link-button-text">/openai/v1/responses/{response_id}</span>
    </a>
</div>

Method colors

Set data-method on .api-link-button-method to apply the method color for get, post, put, patch, or delete. Other methods inherit the surrounding text color.

get /openai/v1/responses/{response_id} post /openai/v1/responses put /openai/v1/responses/{response_id} patch /openai/v1/responses/{response_id} delete /openai/v1/responses/{response_id}
HTML 
<div class="api-link-button-container">
    <a class="api-link-button" href="#method-colors" aria-label="Get a response">
        <span class="api-link-button-method" data-method="get">get</span>
        <span class="api-link-button-text">/openai/v1/responses/{response_id}</span>
    </a>
    <a class="api-link-button" href="#method-colors" aria-label="Create a response">
        <span class="api-link-button-method" data-method="post">post</span>
        <span class="api-link-button-text">/openai/v1/responses</span>
    </a>
    <a class="api-link-button" href="#method-colors" aria-label="Replace a response">
        <span class="api-link-button-method" data-method="put">put</span>
        <span class="api-link-button-text">/openai/v1/responses/{response_id}</span>
    </a>
    <a class="api-link-button" href="#method-colors" aria-label="Update a response">
        <span class="api-link-button-method" data-method="patch">patch</span>
        <span class="api-link-button-text">/openai/v1/responses/{response_id}</span>
    </a>
    <a class="api-link-button" href="#method-colors" aria-label="Delete a response">
        <span class="api-link-button-method" data-method="delete">delete</span>
        <span class="api-link-button-text">/openai/v1/responses/{response_id}</span>
    </a>
</div>

Flying flyout